Tuesday, September 10, 2013

Hide and show a text paragraph using jQuery


Sometimes we may need to hid and show a paragraph.
code:
<html>
<head>
<style>
    .sessionTitle {
        width: 750px;
        height: 43px;
        background:  green;
        border: 1px solid #CCCCCC;
        display: block;
        border-radius:5px;
    }
   .sessionTitle:hover {
          background:  red;

   }
   .sessionTitle img{
      float: left;
      padding-left: 18px;
      padding-top: 17px;
   }

    .detailInfo {
       display: block;
       width: 750px;
       padding: 20px 0;
       background:  lightblue;
       border-radius:5px;
    }
   .sessionTitle .white_detail{
       display: block;
      color: #FFF;
      font-size: 17px;
      font-weight: bold;
      padding-left: 40px;
      margin-top: 10px;
   }

</style>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        //Detailed Info expand and collapse
        $(".detailInfo").hide();
             $(".sessionTitle").click(function(){
            if($(this).next(".detailInfo").css("display")=="none"){
                $(this).next(".detailInfo").show();
                $(this).find("img").attr("src","http://www3.telus.net/jianlu58/white_minus.gif");
            }
            else{
                $(this).next(".detailInfo").hide();
                $(this).find("img").attr("src","http://www3.telus.net/jianlu58/white_plus.gif");
            }
        });

    });
</script> 
</head>
<body>
<h1>Hide and show a text paragraph using jQuery</h1>

            <div class="sessionTitle">
                <img src="http://www3.telus.net/jianlu58/white_plus.gif" />
                <div class="white_detail">
                Tablet computer
                </div>
             
            </div>
            <div class="detailInfo">

                    <p>A tablet computer, or simply tablet,
                        is a mobile computer with display, circuitry and battery in a single unit.</p>
                 
            </div>             
         
</body>
</html>

Demo

Hide and show a text paragraph using jQuery

Tablet computer
A tablet computer, or simply tablet, is a mobile computer with display, circuitry and battery in a single unit.

2 comments:

  1. This is exactly what i've been looking for, except that I need several of those text boxes and when i put more than one code it gets blocked and then wont show the paragraph. Any ideas how to fix this? I really appreciate it. :)

    ReplyDelete
  2. what happened when image is save in images folder . not from http ?

    what we write in script?
    $(this).find("img").attr("src","http://www3.telus.net/jianlu58/white_minus.gif");
    instead of this http?
    how you write as a png ?

    ReplyDelete