javascript toggle script

Question

I have this js code, which display and hide some content on a page after click on a button. I've added second script (slickbox2), which do the same with another content by clicking on 2nd button. The problem I need to resolve is when 1st content is displayed and I click on 2nd button, I want to hide the 1st content. Thank you!

jQuery(document).ready(function() {
    //hides the slickbox as soon as the DOM is ready
    jQuery('#slickbox').hide();

    // toggles the slickbox on clicking the noted link  
    jQuery('#slick-toggle').click(function() {
        jQuery('#slickbox').toggle(400);
        return false;
    });

    jQuery('#slickbox2').hide();
    // toggles the slickbox on clicking the noted link  
    jQuery('#slick-toggle2').click(function() {
       jQuery('#slickbox2').toggle(400);
       return false;
    });

});

cillierscharl · Accepted Answer · 2011-07-28 06:48:03Z

1

Changed a few points.

$(document).ready(function(){
    $('[id*=slickbox]').hide(); //hide your slickboxs

    $('#slick-toggle').click(function(){
        $('#slickbox').show();
        $('#slickbox2').hide();
    });

    $('#slick-toggle2').click(function(){
        $('#slickbox').hide();
        $('#slickbox2').show();
    });
});

edited Jul 28, 2011 at 6:48

answered Jul 27, 2011 at 15:34

cillierscharl

7,1053 gold badges31 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jason Kaczmarsky · Accepted Answer · 2011-07-27 15:27:44Z

1

BTW You can use $ in place of jQuery in all of your code:

jQuery('#slick-toggle2').click(function() {
    jQuery('#slickbox2').toggle(400);
    $('#slickbox1').toggle(400);
    return false;
});

answered Jul 27, 2011 at 15:27

Jason Kaczmarsky

1,6861 gold badge18 silver badges30 bronze badges

3 Comments

Phil Over a year ago

This is what it appears that he is asking, but seems too simple.

culter Over a year ago

Soooo simple. I'm ashamed. I'm not very familiar with js, so I was afraid that it will take me an hour instead of thinking about it myself. Sorry for such a stupid question. Thank you, Jason and others!

jasalguero Over a year ago

Using toggle will make your first content appear when you click on the second button if it was hidden

Ehtesham · Accepted Answer · 2011-07-27 15:32:58Z

1

First of all you need to give class to all slickboxes e.g. slickbox then your Javascript would be like

    <script type="text/javascript">
    jQuery(document).ready(function() {
        $('.slickbox').hide();      //hides all elements with class slickbox

        $('.slickbox').click(function(){
             $('.slickbox').hide();
             $(this).toggle(400);
        })
    });
    </script>

answered Jul 27, 2011 at 15:32

Ehtesham

2,9851 gold badge20 silver badges22 bronze badges

Comments

jasalguero · Accepted Answer · 2011-07-27 15:46:59Z

1

You can use hide() function to always hide the first content when clicking on the second button

jQuery('#slick-toggle2').click(function() {
  jQuery('#slickbox').hide(400);
  jQuery('#slickbox2').toggle(400);
  return false;
});

Don't use toggle or the content will appear if it was hidden

edited Jul 27, 2011 at 15:46

answered Jul 27, 2011 at 15:34

jasalguero

4,1812 gold badges35 silver badges55 bronze badges

Collectives™ on Stack Overflow

javascript toggle script

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related