If you're looking for a way to dynamically show/hide div elements on your page, I recommend using the getElementById method in JavaScript. Simply add an id attribute to your div and handle the onClick event.
<script type="javascript">
function toggleDivVisibility() {
var div = document.getElementById("myDiv");
if (div.style.display === "none") {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
</script>
....
<p><a href="#" class="toggleLink" onClick="toggleDivVisibility()">click to show/hide div</a></p>
<div class="toggleDiv" id="myDiv">
<p>Content inside the div will appear/disappear when clicked.</p>
</div>
Update: If there are multiple links and corresponding div elements, you can pass the id as a parameter to the function for targeted manipulation.
<script type="javascript">
function toggleDivVisibility(id) {
var div = document.getElementById("hiddenDivId" + id);
//do whatever you want with the specific div.
}
</script>
....
<p><a href="#" class="toggleLink" onClick="toggleDivVisibility(1)">click to show/hide div 1</a></p>
<div class="toggleDiv" id="hiddenDivId1">
<p>Text within hidden div 1.</p>
</div>
<p><a href="#" class="toggleLink" onClick="toggleDivVisibility(N)">click to show/hide div N</a></p>
....
<div class="toggleDiv" id="hiddenDivIdN">
<p>Text within hidden div N.</p>
</div>
Another option is to utilize the window.event object for more control over the clicked element.
<script type="javascript">
function toggleDivVisibility() {
var e = window.event,
obj = e.target || e.srcElement,
id = e.id,
div = document.getElementById("hiddenDivId" + id);
//do whatever you want with the specific div.
}
</script>