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 :-)
Submit an article or tip