Grow your CSS skills. Land your dream job.

Jquery slide toggle

  • # January 13, 2013 at 12:23 pm

    First, I’m a novice at jquery & appreciate your help. I’m experienced with css & html, using Dreamweaver to develop websites.

    Here’s a link to website I’m developing, http://visualsgd.net/Testing/IronMen/index.html. Once viewer has entered website (click on the Iron Men logo), I’d like to have the hidden content displayed when viewer clicks on one the navigation buttons. Currently on the About Us page the content is hidden and I’ve used the code from this post: http://css-tricks.com/case-study-jquery-fixer-upper/. The other pages show the hidden content.

    I’ve used the Code Pen tool as suggested, here’s the link http://codepen.io/anon/pen/tJyCx

    # January 13, 2013 at 10:07 pm

    I’ve found the way to get slide toggle working, yeah! But now I need to know how to apply both link and slide on same click of mouse, i.e. when viewer clicks on About Us in nav bar, they are taken to About Us page and the hidden div slides in. Right now you have to click once to get to page and then click again to load hidden div. I’ve updated the files on the testing site referenced above. Hoping someone can help!

    # January 13, 2013 at 10:45 pm

    O.k. so if I keep going, I’ll have this situated. Once I do I can post how everything works JIC someone else can use this info. I’ve now got the effect and action all on one click but now I have a white flash between pages, any suggestions?

    # January 14, 2013 at 11:14 am

    Update…flash has mysteriously disappeared, maybe just needed to give the laptop a break!

    Thought I’d post how I managed to get things working for others who might be looking….

    Applying effect and action on same click in a

    • , used < "ul", this>, in selector of jquery script. Here’s the script:


      My limited knowledge of jquery tells me that applying the slide toggle immediately after the page load will load the hidden div with whatever action is coded. Additionally, CSS for hidden div is display:none.

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".