CODEWITHSUNDEEP
javascriptjqueryhtml
Fabian
Fabian

Reputation: 265

Trying to use show/hide to slowly fade In/ fade Out a paragraph

I'm trying to make to show/hide a paragraph when buttons are pressed. But also to look like slow movement up and down.

That's how the HTML look like for example :

<button class="hideA">Hide</button>
<button class="showA">show</button>
<p id>Helloooooooooooooooooooooo.</p>

And that's how the Jquery code looks like:

$(".hideA").click(function(){
    $(".hideA p").hide(function(){
    });
});
$(".showA").click(function(){
    $(".hideA p").show(function(){
    });
});

But this code is not running for some reason. please let me know the reason if you can!

Upvotes: 3

Views: 453

Answers (2)

DirWolf
DirWolf

Reputation: 891

First of all, you need to remove the $(".hideA p") and use $("p") otherwise you are hiding the Button!

Also, you can specify the paragraph by adding an id to it:

<p id="paragraph">Helloooooooooooooooooooooo.</p>

Then Try the following code to run it: 

$(document).ready(function(){
    $(".hideA").click(function(){
        $("#paragraph").hide("slow");
    });
    $(".showA").click(function(){
        $("#paragraph").show("slow");
    });
});

Upvotes: 2

Pranay Rana
Pranay Rana

Reputation: 176916

for both the below way to work you need to set id of p element 

<button class="hideA">Hide</button>
<button class="showA">show</button>
<p id="para">Helloooooooooooooooooooooo.</p>

you can try out this way also , by making use of animate function, this will give fill of hiding and lastly it get hidden by visiblity property.

   $(".hideA").click(function(){
    $( "#para" )
      .css({opacity: 1, visibility: "hidden"})
      .animate({opacity: 0}, 1000);
    });


    $(".showA").click(function(){
     $( "#para" )
     .css({opacity: 0, visibility: "visible"})
     .animate({opacity: 1}, 1000); 
    });

make use of slideUp and slideDown method . this method provide animation of hiding and showing element but your element stays in DOM 

$(".hideA").click(function(){
    $("#para").slideUp(function(){
    });
});
$(".showA").click(function(){
    $("#para").slideDown(function(){
    });
});

working demo at : https://jsfiddle.net/pranayamr/xttk3r6o/

Upvotes: 1

Related Questions