Question

I’ve got a test below of a expand/collapse jquery script. At the moment on page load it shows the div as collapsed so you have to click it to reveal the info.

How can I reverse this so on load it’s expanded and on clicking it, it collapses?

<style>
p.toggler{cursor: pointer;}
span.closeSlider{cursor: pointer;}
.slider{
    display:none;
}
.collapseSlider{
    display:none;
}
.sliderExpanded .collapseSlider{
    display:block;
}
.sliderExpanded .expandSlider{
    display:none;
}
</style>
<script>
function toggleSlides(){
    $('.toggler').click(function(e){
        var id=$(this).attr('id');
        var widgetId=id.substring(id.indexOf('-')+1,id.length);
        $('#'+widgetId).slideToggle();
        $(this).toggleClass('sliderExpanded');
        $('.closeSlider').click(function(){
                $(this).parent().hide('slow');
                var relatedToggler='toggler-'+$(this).parent().attr('id');
                $('#'+relatedToggler).removeClass('sliderExpanded');
        });
    });
};
$(function(){
    toggleSlides();
});
</script>



<p class="toggler" id="toggler-slideTwo">
    <span class="expandSlider">SHOW</span><span class="collapseSlider">HIDE</span>
</p>
<div class="slider" id="slideTwo">
    <p>Slide Two lorem ipsum tupsum...</p>
    <span class="closeSlider">Close</span>
</div>

Answer 1

Try this… Change .slider{ display:none; } to .slider{ display:block; }, and switch the “SHOW” and “HIDE” texts. It works, but looking at the code, the class names etc. might get confusing.. That’s up to you to fix 🙂

http://jsfiddle.net/HPTmg/