Question

I have a jQuery question, and I really think it is a silly one : i’m a beginner in JS and jQuery…

I’m using

$("#myLink").click(function(){
    $(".myClassToShow").show();
    $(".myClassToHide").hide();
});

to hide elements with class myClassToHide as a class attribute and show elements with class myClassToShow as a class attribute. I think this is really easy to understand 🙂

I didn’t think it would hide every elements with the good class, but, well, it works.

My worry here is that my elements show and hide only for few seconds : the time my mouse click on the link.

I would like to make myClassToShow elements remaining on the screen, when i already clicked my link, and myClassToHide elements really hide.

For example, on the johann Hammarstrom’s website, when you click on “Print”, all his works which are not print gone hide, and only the printing one remain.

That’s kinda what i want. I searched using Firebug, but couldn’t find which kind of event he used. I know a onchange is not the correct answer, so what?

Could you help me please?

(by the way, Thanks by advance for your time)

Answer 1

I think you’re missing e.preventDefault();, if I understood you correctly.

$("#myLink").click(function(e) { // Add the event parameter.
    $(".myClassToShow").show(); // .show('fast'); for animation effect.
    $(".myClassToHide").hide(); // .hide('fast'); for animation effect.

    // Prevent the default action of the event to be triggered.
    e.preventDefault(); 

    // Or use
    return false;
});

The part you were looking for is in this file: http://johanhammarstrom.se/wp-content/themes/garnish/js/jquery.custom.js?ver=1.0
Search for portfolioTerms.click.