SilvioCro SilvioCro - 7 months ago 22
HTML Question

jQuery hide/show content

I don't Know how to hide, and later show content when user click on button(checkbox). I made code but it doesn't work. When I click on checkbox, content won't hide.
I want make when user clicks on checkbox that frist content hides and second shows. And if user clicks again on checkbox that frist content shows and second hides.

<script>
$(document).ready(function(){
$("#skin_rasa").click(function() {
if ($('#skin_rasa').css('display') == 'none')
{
$("#_hsync_skin_menu_id").hide("slow", function() {
$("#_hsync_skin_menu_rasa").show("slow");
});
}
if ($('#skin_rasa').css('display') != 'none')
{
$("#_hsync_skin_menu_rasa").hide("slow", function() {
$("#_hsync_skin_menu_id").show("slow");
});
}
});
});
</script>


@EDIT: I saw where I did mistake. Now it Works but only on 1st click.

<script>
$(document).ready(function(){
$("#skin_rasa").click(function() {
if ($('#_hsync_skin_menu_id').css('display') != 'none')
{
$("#_hsync_skin_menu_id").hide("slow", function() {
$("#_hsync_skin_menu_rasa").show("slow");
});
}
if ($('#_hsync_skin_menu_id').css('display') == 'none')
{
$("#_hsync_skin_menu_rasa").hide("slow", function() {
$("#_hsync_skin_menu_id").show("slow");
});
}
});
});
</script>

Answer

Simply you can use toggle
Updated : working example : http://jsfiddle.net/j999y/1725/

   <input type="checkbox" id="myCheckBox">Toggle
   <p id="myContent">
    Here is your content
    </p>
    <p id="anotherContent" >
    Here is another content content
    </p>

JS:

   $( "#myCheckBox" ).click(function() {    
      $('#myContent').toggle( "slow");
      $('#anotherContent').toggle( "slow");
   });