Dear All,
I have seen a lot of accordion which when you click it open the contents below. I would like one where I click I want the contents to open at the top rather than below. Infact I just need only on title and when I click on it should open the contents. Any idea how to do it? Thank you.
Dear Gumape,
Thank you for the codes and link. Can I like control the height of the contents and put a scroll bar if it crossses certain height. Another thing can I form my contents in the form of table e.g. with <tr> and <td>. Thank you.
I think the following example will help you:
<head>
<style>
.accordTitle {
font-size: 20px;
font-weight: bold;
background-color: #a0a0a0;
width: 200px;
}
.accordContent {
font-size: 14px;
background-color: #f0a0f0;
display: none;
width: 200px;
height: 100px;
}
</style>
<script language="JavaScript">
function ToggleAccord (contentID) {
var accordContent = document.getElementById (contentID);
if (accordContent.offsetHeight == 0) {
accordContent.style.display = "block";
}
else {
accordContent.style.display = "";
}
}
</script>
</head>
<body>
<div class="accordContent" id="accordContent">Accordion content</div>
<div class="accordTitle" onclick="ToggleAccord ('accordContent')">Accordion title</div>
</body>
Some comments to the source:
When the user clicks on the title, the onclick event is fired and the ToggleAccord method is called.
The ToggleAccord method gets the id of the contents element (accordContent) as a contentID parameter.
The ToggleAccord method uses the offsetHeight property to check whether the contents is visible.
If the contents is not visible, the display style property of the contents will be set to block, so the contents becomes visible, otherwise the display style property will be cleared.
Since the .accordContent style declaration sets the display property to none, clearing the display style property of the contents causes the contents disappear again.
If you need further details, the following links will be useful:
display style property,
onclick event,
offsetHeight property.