Yesterday Stephen Gainer blogged about a small Javascript problem he had.
Brilliant! I gave my customer exactly what he wanted! No muss no fuss! I’m sure you see where I’m going with this. As soon as this was done, my customer came back to me and said he needed four more of these.
My solution, which is terrible, was to duplicate the above four more times (me2Show, me2Hide, me3Show, me3Hide and on and on and …..) Now I realize how stupid this is, but remember how I said above that there are certain simple things that I never really learned because I never had to? Well this is one, and this is where I would like YOUR help!
I know there has to be some way to loop through all of my element ID’s with a simple piece of JavaScript, but I can’t for the life of me figure out how to do that. Can anyone help me out here?
I commented on Stephen’s post and suggested that he use jQuery to easily loop though all elements with a specific class and add a listener function to them to detect a click. Since it is hard to get all information into a comment, I decided to post a simple code sample here instead. My code is easy to expand on, e.g by adding more sections.
There are of course many different ways to do this. You can of course use .toggle(), but I prefer to have better control of when to hide and show the sections. You can break out the lines $(“.mySection”).hide(); into a separate function and call it from the two locations. This is of course not saving anything in this particular code sample, but in more complex code it would make sense to break down the code into separate functions if they are called from multiple lines.
Hopefully this code will help someone, or inspire someone to start playing with jQuery. I like jQuery, as it easily integrates with classic Domino web applications, and even can be used with Xpages.
<html>
<head>
<title>jQuery hide/show</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
// Hide all sections when the page is first loaded
$(".mySection").hide();
// Setup all elements with class "myButton" to react on click
$(".myButton").click( function() {
// Check if the section is already displayed
if ($(this).html()=="Hide") {
// Hide the current section
var sectionID = $(this).attr("data-showsection");
$("#"+sectionID).hide();
// Set the button label to "Show"
$(this).html("Show");
} else {
// Hide all sections, using the class mySection
$(".mySection").hide();
// Set all button labels to "Show"
$(".myButton").html("Show");
// Show the section we want to display
var sectionID = $(this).attr("data-showsection");
$("#"+sectionID).show();
// Set the button label to "hide"
$(this).html("Show");
}
});
});
</script>
</head>
<body>
<button id="btnOne" class="myButton" data-showsection="sectionOne">Show</button>
<div id="sectionOne" class="mySection" data-btnID="btnOne">This is the 1st section.</div>
<br>
<button id="btnTwo" class="myButton" data-showsection="sectionTwo">Show</button>
<div id="sectionTwo" class="mySection" data-btnID="btnTwo">You are now seeing the 2nd section.</div>
<br>
<button id="btnThree" class="myButton" data-showsection="sectionThree">Show</button>
<div id="sectionThree" class="mySection" data-btnID="btnThree">This is the 3rd section.</div>
<br>
<button id="btnFour" class="myButton" data-showsection="sectionFour">Show</button>
<div id="sectionFour" class="mySection" data-btnID="btnFour">The 4th and last section.</div>
<br>
</body>