Click here to Skip to main content
14,271,310 members
Rate this:
Please Sign up or sign in to vote.
See more:
Hi there,
I am creating a webpage which requires the use of collapsible and expandible div tags.
I have created the basic setup for this.
So far I have it setup so that when the webpage opens it has 3 div tags, the first div tag is expanded and the other two div tags are collapsed at first.
You can click on the title or the image to collapse or expand each div tag.
What I would like to add to my scripting it that if another div tag is opened, it will close the previiuos div tag, (so only one div tag will be open at anytime). Alos I would like to change the image for each heading if the div tag is already expanded I want the image to change to the minus.png image, when collapsed I want the image to change back to the plus.png image.
Here is my coding so far:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	.hidden
	{
		display: none;
	}
	.unhidden
	{
		display: block;
	}
	h3
	{
		text-decoration: none;
		color: #df8312;
	}
	a 
	{
		text-decoration: none;
	}
	link
	{
		text-decoration: none;
	}
	img
	{
		border-style: none;
	}
</style>
<script type="text/javascript">
 function unhide(divID) {
 var item = document.getElementById(divID);
 if (item) {
 item.className=(item.className=='hidden')?'unhidden':'hidden';
 }
 }
</script>
</head>

<body>
<a href="javascript:unhide('P1');"><h3><img id="divImg1" src="images/plus.png" width="15" height="15" /> Title 1</h3></a>
 <div id="P1" class="unhidden">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>
 
 <a href="javascript:unhide('P2');"><h3><img id="divImg2" src="images/plus.png" width="15" height="15" /> Title 2</h3></a>
 <div id="P2" class="hidden">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>
 
 <a href="javascript:unhide('P3');"><h3><img id="divImg3" src="images/plus.png" width="15" height="15" /> Title 3</h3></a>
<div id="P3" class="hidden">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 </div>
 
</body>
</html>


Could I please get some assistance with finishing this coding for collpasible and expandible div tags and also changing the image when the div tag is open or closed.

Thank you All :-)
Posted
Updated 24-May-12 16:07pm
v2

1 solution

Rate this:
Please Sign up or sign in to vote.

Solution 1

   
Comments
Sandeep Mewara 25-May-12 1:10am
   
Yep, best way as of now to achieve what is asked for. 5!

Just adding another link to the set: http://api.jquery.com/toggle/
   
Thank you, Sandeep.
Yes, you are right about toggle. There can be very many nice variants of the behavior though.
--SA
Maciej Los 25-May-12 8:05am
   
Sandeep, your comment should be the answer, solution ;)
Sergey Alexandrovich Kryukov 25-May-12 11:48am
   
And I would vote 5 for it... :-)
--SA
Sandeep Mewara 25-May-12 15:31pm
   
Thanks. May be some other answer. :)
Maciej Los 25-May-12 8:02am
   
Good answer with many useful links! My 5!
Sergey Alexandrovich Kryukov 25-May-12 11:48am
   
Thank you, Maciej.
--SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100