Monday 6 February 2017

jquery to show and hide div content - easy method

Here is a simple script using jQuery library to hide and show the div content. We are using built in function toggle() and if condition to show and hide the content respectively.

<!DOCTYPE html>
<html><head></head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.Add').click(function(){
    $('.hidden', this).toggle();
    if($('.hidden').is(":visible")){
        $('.Add p').text("- close content");
    }
     else 
    {
        $('.Add p').text("+ Open content"); 
    } 
  });
});
</script>
<div class="Add">
    <p>
    + Open content
    </p>
    <div class='hidden' style="display:none;">Here goes your hidden content</div>
</div>
</body>
</html>

Try Output Here :

+ Open content

No comments:
Write comments

Featured post

List of Universities in Karnataka offering M.Sc Computer Science

The post-graduate programme in Computer Science (M.Sc Computer Science) contains two academic years duration and having a four semesters....

Popular Posts

Copyright @ 2011-2022