jQuery question - Show one DIV out of many by default when page loads ? 1

c0deM0nK424 · Jul 9, 2013

okay this is how far i've managed to get - i've embedded a jQuery script on this website using basekit sitebuilder, inside 'page scripts'.

instead of opting for multiple sub-menu links, my client and I agreed it would be better if we housed all that information as show and hide divs under one main navigation link - so that on that page, you can see them all.

http://www.liliumstanleyconcierge.com/personal-concierge

My question is this - using my code, what could you add to make the FIRST DIV #services1 SHOW on default when the page loads ?

here is the jQuery script - its a long winded approach yes, i will refine it in time when i get better at jQuery but for now it works.

<script src="

http://code.jquery.com/jquery-latest.js"></script>

jpadie · Jul 9, 2013

i'd use a tried and tested accordion plugin, were I you.

also i'd use a common class rather than explicitly hide/show each id.

but to answer your specific question add this to the end of script

Code:

$(document).ready(function(){
 $('#services1').trigger('click');
});

c0deM0nK424 · Jul 10, 2013

how do you define/declare a common class ? NM i think I know how to do that ...and thanks for the response jpadie.

You're responses are invaluable to us all. thanks.

jpadie · Jul 10, 2013

just add class="accordion" to each accordion title then use some markup like this

Code:

<div class="accordion">
 <div class="accordionTitle">Title</div>
 <div class="accordionContent">...</div>
</div>

you could also use dl, dt and dd tags or whatever.

then a very basic accordion type script would look like this

Code:

$(document).ready(function(){
 $('.accordionContent').not(':first').hide(); //hides each content set other than the first
 
 $(document).on('click', '.accordionTitle', function(e){
   e.stopPropagation(); //stop the click propagating. 
   var cont = $(this).closest('.accordion').find('.accordionContent');
   if(cont.is(':visible')){ 
     cont.hide();
   }else{
     $('.accordionContent').hide();
     cont.show('slow');
   }
});
});

the javascript could be simpler (using parent() and sibling() etc but this way guarantees that it won't break if you insert other complementary mark up.

hopefully you can see that the above is rather easier to consume, extend and manage than iterating each of the ids each time. As the click is on the document, the code will also survive more accordion panels being dynamically inserted, if that's the way you want to go. If not you could safely change the line to

Code:

$('.accordionTitle').on('click', function(e){ ...

this may have better compatibility (I recall running into problems recently with trapping document level events with one of the mobile browsers. don't remember which, I'm afraid - and it could well have been an artefact of jQuery mobile rather than the browser itself.

instead of the hide(), show() you could animate a scroll effect if you really want to load jquery ui (1 MB or so) to do so. or you could just load an animation plugin or whatever. I'm not convinced of their respective UI value, tbh...

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

jQuery question - Show one DIV out of many by default when page loads ? 1

c0deM0nK424

Programmer

jpadie

Technical User

c0deM0nK424

Programmer

jpadie

Technical User

Similar threads

Part and Inventory Search

Sponsor