使用Jquery切换HTML和CSS

Question

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

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

Answer 1

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();
});

Answer 2

如果您可以将红线上方的所有内容放入具有唯一ID的单个包含元素中，则只需在单个元素上使用.toggle() jQuery函数即可实现所需的功能。

Answer 3

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.

Answer 4

Try using the toggle function.

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

Answer 5

Use the toggle function without any parameter..

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

This should work.

Answer 6

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

.hidden {
    display: none;
}

References:

• slideToggle
• toggle
• toggleClass

Answer 7

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();
});