1 Replies - 1023 Views - Last Post: 10 May 2011 - 09:09 AM

#1 stinky22  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 10-May 11

Jquery accordion slider / collapsible

Posted 10 May 2011 - 05:22 AM

Hiya,

Decided to join a forum for the first time as I've tried everything I can to get this working and can't find anything similar that will lead me in the right direction. :sweatdrop:

I'm using an jquery accordion with adaptions to reach the required effect I'm looking for, which is:

1. click on a header (which will eventually become an image)
2. the div below comes up with the full image or video centered on the page.

This, I have working and have a limit of 4 lists per row and the div opening up in the same position despite the links floating left.

The problem I am facing is getting the div to push the new row of li's down instead of them all appearing in the same place, I would only like the divs to be the same for the list on that particular row and to push down anything else underneath it.

I've tried using different ID's, positions and new UL's which haven't proven to work.

Any help/direction would be appreciated.

The code below shows you how far I got.


 
			$(function(){

				// Accordion
				$("#accordion").accordion({ autoHeight: false, collapsible: true, active:false});
				
				// Slider
				$('#slider').slider({
					range: true,
					values: [17, 67]
				});
				
			});



<style>
ul {width:800px; height: auto;}
li {float:left; width:190px;background:#000;margin-right:3px; list-style:none;}
.sty {
	margin: 30px 0 30px 0;	
	position:fixed;
	left: 250px;
	width:800px;
	overflow: hidden;
}

</style>

<ul id="accordion" class="simple">

    <li>
        <a href="#">Header Title</a>
        <div class="sty">
        <img src="images/test.jpg" width="800" height="426" /><p>text in here</p></div>
        
    </li>
        <li>
        <a href="#">Header Title</a>
        <div class="sty">
        <img src="images/test.jpg" width="800" height="426" /></div>
        
        
    </li>
            <li>
        <a href="#">Header Title</a>
        <div class="sty">
        <img src="images/test.jpg" width="800" height="426" /></div>
        
        
    </li>
            <li>
        <a href="#">Header Title</a>
        <div class="sty">
        <img src="images/test.jpg" width="800" height="426" /></div>
        
        
    </li>
    
        <li>
        <a href="#">New Row</a>
        <div class="sty">
        <img src="images/test.jpg" width="800" height="426" /><p>text in here</p></div>
        
        
    </li>
    
</ul>




If you need anymore info just let me know.
Stinky :)

Is This A Good Question/Topic? 0
  • +

Replies To: Jquery accordion slider / collapsible

#2 macosxnerd101  Icon User is online

  • Self-Trained Economist
  • member icon




Reputation: 10786
  • View blog
  • Posts: 40,163
  • Joined: 27-December 08

Re: Jquery accordion slider / collapsible

Posted 10 May 2011 - 09:09 AM

*Moved to jQuery*
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1