Horizontal Accordion script working with display

[noobie123]

1) Script Title: Horizontal Accordion script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/haccordion.htm

3) Describe problem: I've been trying to use the script on a website that displays different images depending on what somebody clicks on. I've used display: none; to hid what isn't currently being shown, but this seems to stop the accordion script for working. Is it possible to have these both working together? I've copied the code from here exactly the only thing I've changed is I've added the display style to the <DIV> containing each haccordion, for example:


<div class="scroller1" id="1000" style="display: block;">
<a href="javascript:thumbnailslast()"><img src="images/portfolio_left.png" alt="" style="float: left; margin: 35px 55px 0 50px;"/></a>
<div id="hc1" class="haccordion">
<ul>

<li>
<a href="javascript:one()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/one.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>
</div></a>
</li>

<li>
<a href="javascript:two()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/two.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>
</div></a>
</li>

<li>
<a href="javascript:three()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/three.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>
</div></a>
</li>

<li>
<a href="javascript:four()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/four.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>
</div></a>
</li>

</ul>
</div>
<a href="javascript:thumbnailstwo()"><img src="images/portfolio_right.png" alt="" style="float: right; margin: 35px 45px 0 0;"/></a></div>
<div class=" scroller2" id="2000" style="display: none;">
<a href="javascript:thumbnailsfirst()"><img src="images/portfolio_left.png" alt="" style="float: left; margin: 35px 55px 0 50px;"/></a>
<div id="hc2" class="haccordion">
<ul>

<li>
<a href="javascript:one()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/five.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>
</div></a>
</li>

<li>
<a href="javascript:two()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/six.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>
</div></a>
</li>

<li>
<a href="javascript:three()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/seven.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>
</div></a>
</li>

<li>
<a href="javascript:four()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/eight.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>
</div></a>
</li>

</ul>
</div>
<a href="javascript:thumbnailsthree()"><img src="images/portfolio_right.png" alt="" style="float: right; margin: 35px 45px 0 0;"/></a></div>

I'd appreciate any help with this.

[ddadmin]

The Accordion does require that the contents not be totally hidden (ie: display:none) to work. Based on that requirement, one workaround is to have the script dynamically hide the scroller DIV after the accordion has initialized and have gotten all the necessary measurements, instead of hiding the DIV from the get go using display:none.

Try the below modified .js file, then inside your accordion initialization code in the HEAD section of your page, define a "scrollerid" option set to the ID of the containing scroller DIV:


haccordion.setup({
accordionid: 'hc1', //main accordion div id
scrollerid: '2000',
paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})

Furthermore, remove the inline CSS "display:none" from the DIV in question:


<div class=" scroller2" id="2000" style="display: none;">

What will happen now is that the script will first initialize the accordion inside the DIV, and after that, immediately hide it. The accordion should continue to work when the DIV is revealed again.

[noobie123]

Thanks for that, is doesn't seem to have worked completely, it does work a little bit - it has hidden the last DIV, but it's showing all of the others and when I click on the last 'next' button nothing happens and the very last DIV isn't shown at all.

If it helps the page I'm working on is here (http://www.aka-illos.com/Kari/portfolioOLD.html)

Thanks for your help with this.

Cheers
Lucy

[noobie123]

If it helps the page I'm working on is here (http://www.aka-illos.com/Kari/portfolioOLD.html)

Thanks for helping with this

[ddadmin]

Looking at your page, there are a number of issues that need to be dealt with. Firstly, you effectively have 5 instances of horizontal accordions on your page, though you've given all of them the same ID attribute ("hc1"):


<div id="hc1" class="haccordion">
<ul>

<li>
<a href="javascript:one()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/one.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>
</div></a>
</li>

<li>

<a href="javascript:two()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/two.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>
</div></a>
</li>

<li>
<a href="javascript:three()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/three.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>

</div></a>
</li>

<li>
<a href="javascript:four()"><div class="hpanel">
<img src="images/portfolio_images/thumbnails/four.png" style="float:left; padding-right:8px;" /><p>The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.</p>
</div></a>
</li>

</ul>
</div>

This is incorrect- each horizontal accordion should carry an unique ID attribute, so ("hc1" for the first one, "hc2" for the 2nd, "hc3" for the 3rd etc). With that corrected, you also need to spawn a new instance of an accordion (by calling haccordion.setup()) for each accordion on your page, instead of what you have right now:


haccordion.setup({
accordionid: 'hc1', //main accordion div id
scrollerid: '2000',
scrollerid: '3000',
scrollerid: '4000',
scrollerid: '5000',
scrollerid: '6000',
paneldimensions: {peekw:'100px', fullw:'320px', h:'115px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})
</script>

The above should be changed to something like:


haccordion.setup({
accordionid: 'hc1', //main accordion div id
scrollerid: '2000',
paneldimensions: {peekw:'100px', fullw:'320px', h:'115px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})

haccordion.setup({
accordionid: 'hc2', //main accordion div id
scrollerid: '3000',
paneldimensions: {peekw:'100px', fullw:'320px', h:'115px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})

haccordion.setup({
accordionid: 'hc3', //main accordion div id
scrollerid: '4000',
paneldimensions: {peekw:'100px', fullw:'320px', h:'115px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})

//etc

With the above changes it should fix the issue with only the last accordion working, though I'm not sure if there remains other issues as far as conflicts with your scroller script that may derail everything. Worth a shot though.

[noobie123]

I tried that, but now nothing seems to be showing :( I'm sure I've done something wrong and missed something out, but I'm not sure what.

The page is here (http://www.aka-illos.com/Kari/portfolioOLD.html)

Thank you

[noobie123]

I'm not sure what's going wrong here, but I still can't seem to get this to work properly :(
You can see the where I'm trying to get it to work here (http://www.aka-illos.com/Kari/portfolioOLD.html)

[noobie123]

The page this is referring to doesn't exist, please can this thread be deleted?
Thanks