Here is a test showcasing an expand/collapse jQuery script. Currently, the div is collapsed on page load and you need to click it to see the content.
Is there a way to change this so that the div is expanded on load and collapses upon clicking?
<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>