Using Jquery to toggle HTML and CSS

Question

I'm looking to use jquery for a sort of toggle button to toggle between the two below states;

Toggle A

Toggle B

So everything in picture A (above the red line) is hidden when i click the Toggle Button/link and when i click the toggle button again, it reappears.

I've been looking into Jquerys toggleClass function;

$("button").click(function(){
$("p").toggleClass("main");
});

But this i beleive would only hide the CSS, not the HTML too. Am i misusing the function or is not make for this?

thanks

I don't really get what you mean by "hide the CSS, not the HTML too" to be honest. It doesn't hide anything, it just adds or removes (depending on whether or not the matched elements already had the class) the class from the matched elements. If your CSS declaration for .main includes display:none then it will cause any elements matched, and given that class, to no longer be visible. The HTML and CSS still exists in the DOM, though. — Anthony Grist
– Anthony Grist, Commented Jul 5, 2012 at 19:51
i was using toggleclass which didnt hidethe HTML, just the CSS. As other's have answered using toggle or slidetoggle did the trick. — Nathan
– Nathan, Commented Jul 5, 2012 at 20:25

Lowkase · Accepted Answer · 2012-07-05 19:54:55Z

3

Here is a working example:

http://jsfiddle.net/pV7Qe/

<div class="header">header</div>
<div class="menu">
    <div class="my-toggle">toggle</div>
</div>
<div class="content">
content            
</div>

.header
{
    background:lime;
}
.menu
{
    height:100px;
    background:gray;        
}
.my-toggle
{
    width:100px;
    background:red;
    cursor:pointer;
}
.content
{
    height:500px;            
    background:#ddd;
}

$(".my-toggle").click(function() {
  $(".header").slideToggle();
});

answered Jul 5, 2012 at 19:54

Lowkase

5,6992 gold badges34 silver badges48 bronze badges

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

1 Comment

Nathan Over a year ago

thanks for the answer, chose your's as the sliding effect is a great addition. Really impressed with jquery so far.

Anthony Grist · Accepted Answer · 2012-07-05 19:48:11Z

2

If you can put everything above the red line into a single containing element, with a unique ID, you can simply use the .toggle() jQuery function on that single element to achieve what you want.

answered Jul 5, 2012 at 19:48

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

Comments

Shiv Kumar Ganesh · Accepted Answer · 2012-07-05 19:53:50Z

1

Consider two classes

.hide{visibility: hidden;}
.show{visibility: visible;}

Now use this JQuery Code

$("button").click(function(){
$("p").toggleClass('hide','show');
});

This would solve your problem.

answered Jul 5, 2012 at 19:53

Shiv Kumar Ganesh

3,82510 gold badges49 silver badges85 bronze badges

Comments

Sllix · Accepted Answer · 2012-07-05 19:47:28Z

0

Try using the toggle function.

$("idOfButton").click(function(){
    $(".main").toggle();
});

answered Jul 5, 2012 at 19:47

Sllix

6069 silver badges29 bronze badges

Comments

Muthukumar · Accepted Answer · 2012-07-05 19:48:08Z

0

Use the toggle function without any parameter..

   $("button").click(function(){
$("p").toggleClass();
});

This should work.

answered Jul 5, 2012 at 19:48

Muthukumar

9,73918 gold badges67 silver badges87 bronze badges

Comments

Ricardo Lohmann · Accepted Answer · 2012-07-05 19:58:58Z

0

You can use slideToggle(), toggle() or toggleClass('hidden')

.hidden {
    display: none;
}

References:

answered Jul 5, 2012 at 19:58

Ricardo Lohmann

26.4k7 gold badges86 silver badges84 bronze badges

Comments

mgaughan · Accepted Answer · 2012-07-05 20:04:53Z

0

No reason to use toggleClass and have extra css for a hidden class.

Simply use toggle, or slideToggle for a better effect, which everyone here has suggested.

My only added input would be is that instead of

$('.buttons').click(function(){
    $('#div').slideToggle();
});

I believe it is better practice to use 'on'

$('.buttons').on('click', function(){
    $('#div').slideToggle();
});

answered Jul 5, 2012 at 20:04

mgaughan

8757 silver badges23 bronze badges

Collectives™ on Stack Overflow

Using Jquery to toggle HTML and CSS

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related