Website Under Maintenance

We working on broken links and updating the content on website

We are regret for inconvenience


jQuery show / hide effects with examples - jQuery Tutorial

jQuery Effects and Examples

Hide / Show with click event hide() show()


jQuery

$(document).ready(function(){
     $("button#Hide").click(function(){
          $("p#Parragra").hide();
     });
     $("button#Show").click(function(){
          $("p#Parragra").show();
     });
});

HTML

<p id="Parragra"> Here your Text </p>
<button class="btn btn-danger" id="Hide"><i class="fa fa-eye"></i> Click To Hide</button>
<button class="btn btn-success" id="Show"><i class="fa fa-eye-slash"></i> Click To Show</button>
Output

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam eos ratione error magni iste aliquam autem, dolorem. Eos veritatis incidunt, minima excepturi, architecto dolorem quidem consequatur doloribus, fugit aliquam quae.

How to add effect speed with click event


Parameter $(selector).show(speed, callback);

jQuery

$(document).ready(function(){
     $("#HideTrig").click(function(){
          $("img#HideImg").hide(2000);
     });
     $("#ShowTrig").click(function(){
          $("img#HideImg").show(2000);
     });
});

HTML

<img src="../images/notepad.png" alt="" id="HideImg">
<button class="btn btn-success" id="HideTrig"><i class="fa fa-eye-slash"></i> Hide</button>
<button class="btn btn-success" id="ShowTrig"><i class="fa fa-eye"></i> Show</button>
Output

Hide and Show with toggle event toggle()


jQuery

$(document).ready(function(){
     $("#ShowHide").click(function(){
          $("#HideShowContent").toggle("slow");
     });
});

HTML

<p id="HideShowContent">Here is your content</p>
<div class="btn btn-danger" id="ShowHide">Show / Hide</div>
Output
Show / Hide

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum aspernatur impedit iste. Recusandae rerum, id reprehenderit? Autem ducimus quam quas laboriosam voluptas, voluptatum eaque. Ipsa minima rerum, aliquam provident ab.

Post a Comment

Post a Comment