CODEWITHSUNDEEP
javascriptjquery
user3426597
user3426597

Reputation: 41

Show/Hide Text JQuery

I have this code that has the function show/hide for text, right now "Show Text" and "Hide Text" are both visible, anyone have any ideas how I can have the links showing and hiding too?

$(document).ready(function(){
  $("#hide").click(function(){
    $(".content_post").hide();

  });

  $("#show").click(function(){
    $(".content_post").show();
  });
});

Upvotes: 0

Views: 117

Answers (3)

David
David

Reputation: 709

Instead of using 2 buttons, why don't you only use one, with the .toggle(), that way you don't have to hide and show buttons. 

$('#button').click(function(){
    $('.content_post').toggle();
});

Here is a link to the to the docs if you want to check it out. Also if you want to give a more fancy effect you could try the .slideToggle() or the .fadeToggle(), I personally like more the fade.

Upvotes: 0

drued13
drued13

Reputation: 11

This also should works

$(document).ready(function(){
    $("#hide").click(function(){
       $(".content_post").hide();
       $(this).hide();
       $("#show").show();

    });
    $("#show").click(function(){
        $(".content_post").show();
        $(this).hide();
        $("#hide").show();
    });
});

Upvotes: 1

Suvendu Shekhar Giri
Suvendu Shekhar Giri

Reputation: 1384

Try this

$(document).ready(function(){
  $("#hide").click(function(){
    $(".content_post").hide();
    $("#hide").hide();
    $("#show").show();
  });

  $("#show").click(function(){
    $(".content_post").show();
    $("#hide").show();
    $("#show").hide();
  });
});

Upvotes: 0

Related Questions