jQuery Collapse

Test

by SHELDON PASCIAK

HTML

<ul class="tipSection">
    <li class="tipQuestion"><h1>Welcome The Ski Industry</h1>
        <div class="tipContent"> 
            <p><b> Sammy Carlson </b> Sammy Carlson is one of the most infamous skiers, pushing the industry forward. In such a competitive industry it is very hard to get into the spot light. Sammy does a great job of keeping himself there.</p>
     
        </div>
    </li>
        
        
        
            <li class="tipQuestion"><h1>Sammy's Style</h1>
         <div class="tipContent"> 
             <p> In the ski industry style is everything! If you cant make your tricks look good nobody wants to see them. Sammy has great style you can tell by his body language on the features check out a few of his shots.
             </p>
                 
             
      <p> 
                </p>
     
             
       </div>     
    
    </li>
    
</ul>

CSS

body {
    font: 12px verdana;
    
   
background:#000 url(http://images.psxextreme.com/wallpapers/ps3/rain_drops_583.jpg) repeat top left;
     
}

h1 {
     font: 20px verdana;
     color: #fff;
 }
ul {
    padding: 0px;
}


li h1 {
    background: #000000; padding: 10px; width: 500px; color: #FFFFFF; font-size: 14px; cursor: pointer;
    background:#000 url(http://images.psxextreme.com/wallpapers/ps3/rain_drops_583.jpg) repeat top left;
    
}

li div {
    background: #DEE7F7; width: 520px; display:none;
    background:#000 url(http://www.freestockimages.org/wp-content/uploads/2009/05/free-stock-images-brick-wall-textures-09.jpg) repeat top left;
}

li div p {
    padding: 10px;
    margin: 0px;
    font: 13px verdana;
      color: #fff;
}

JavaScript

$(document).ready(function() {

    $("h1").click(function() {
        var target = $(this).next('div.tipContent')
        $("div.tipContent:visible").not(target).slideUp();
        target.slideToggle();

    });
});