Grow/close a DIV onclick and then close the previous div with javascript or jquery

I want to open and grow a hidden DIV onclick, but also close the current opened div.

Thank you very much for your help!

This is my code so far:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<style type="text/css">
.layer1 {
margin: 0;
padding: 0;
width: 500px;
}
 
.heading {
margin: 1px;
color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.content {
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
  jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
    jQuery(this).next(".content").slideToggle(500);
  });
});
</script>



</head>

<body>


<div class="layer1">
<p class="heading">Header-1 </p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<p class="heading">Header-2</p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<p class="heading">Header-3</p>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</body>
</html>

Hi,

You can try the following jQuery code!

<script type="text/javascript">
            jQuery(document).ready(function () {
                jQuery(".content").hide();
                jQuery("p").click(function () {
                    jQuery(".content").hide();
                    jQuery(this).next().show();
                });
            });
        </script>

Hope it helps u…

Hi,

You can try this-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <style type="text/css">
        .layer1
        {
            margin: 0;
            padding: 0;
            width: 500px;
        }
        
        .heading
        {
            margin: 1px;
            color: #fff;
            padding: 3px 10px;
            cursor: pointer;
            position: relative;
            background-color: #c30;
        }
        .content
        {
            padding: 5px 10px;
            background-color: #fafafa;
        }
        p
        {
            padding: 5px 0;
        }
    </style>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery(".content").hide();
            jQuery(".heading").click(function () {
                jQuery(".content").hide(500);
                jQuery(this).next(".content").slideToggle(500);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="layer1">
        <p class="heading">
            Header-1
        </p>
        <div class="content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet,
            consectetuer adipiscing elit</div>
        <p class="heading">
            Header-2</p>
        <div class="content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet,
            consectetuer adipiscing elit</div>
        <p class="heading">
            Header-3</p>
        <div class="content">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet,
            consectetuer adipiscing elit</div>
    </div>
    </form>
</body>
</html>

OK that worked good but actually I have 3 buttons on one row. the content is below.

If I click button1 I want opencontent div to open and the other buttons to close if open. same goes for the other 2 buttons.

Below is the broken code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <style type="text/css">
		
        .layer1
        {
            margin: 0;
            padding: 0;
            width: 400px;
        }
        
        .heading
        {
            margin: 1px;
            color: #fff;
            padding: 3px 10px;
            cursor: pointer;
            position: relative;
            background-color: #c30;
			float:left;
        }
        .content
        {
            padding: 5px 10px;
            background-color: #fafafa;
        }
        p
        {
            padding: 5px 0;
        }
    </style>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery(".content").hide();
            jQuery(".heading").click(function () {
                jQuery(".content").hide(500);
                jQuery(this).next(".content").slideToggle(500);
            });
        });
    </script>
</head>
<body>
    <div class="home">
        <p class="heading" id="button1">Header-1</p><p class="heading" id="button2">Header-2</p><p class="heading" id="button3">Header-3</p>
        
        <div class="content" id="opencontent1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet,
            consectetuer adipiscing elit
        </div>
            
        
        <div class="content" id="opencontent2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet,
            consectetuer adipiscing elit
        </div>
            
        
        <div class="content" id="opencontent3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet,
            consectetuer adipiscing elit
        </div>
    </div>
</body>
</html>

Hi,

Change the code a little-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <style type="text/css">
                
        .layer1
        {
            margin: 0;
            padding: 0;
            width: 400px;
        }
        
        .heading
        {
            margin: 1px;
            color: #fff;
            padding: 3px 10px;
            cursor: pointer;
            position: relative;
            background-color: #c30;
                        float:left;
        }
        .content
        {
            padding: 5px 10px;
            background-color: #fafafa;
        }
        p
        {
            padding: 5px 0;
        }
    </style>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            jQuery(".content").hide();
            jQuery(".heading").click(function () {
                jQuery(".content").hide();
                jQuery("div[id="+jQuery(this).attr("divID")+"]").slideToggle(500);
            });
        });
    </script>
</head>
<body>
    <div class="home">
        <p class="heading" id="button1" divID="opencontent1">Header-1</p><p class="heading" id="button2"

divID="opencontent2">Header-2</p><p class="heading" id="button3" divID="opencontent3">Header-3</p>
        
        <div class="content" id="opencontent1">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet,
            consectetuer adipiscing elit 1
        </div>
            
        
        <div class="content" id="opencontent2">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet,
            consectetuer adipiscing elit 2
        </div>
            
        
        <div class="content" id="opencontent3">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet,
            consectetuer adipiscing elit 3
        </div>
    </div>
</body>
</html>

Leave a Reply