Let me explain the scenario:
I have a website that will delve into 4 different subjects. Initially, I have 4 divs each representing the title of those subjects. For instance,
<div><p> Physics </p></div>
<div><p> Chemistry </p></div>
<div><p> Biology </p></div>
<div><p> Math </p></div>
Upon clicking on the 'physics' div, I want another div to appear providing more information about a physics problem. Clicking again should make the 'elaboration div' disappear. I have successfully implemented this for one subject using this example:
This is the jQuery code I am currently utilizing for this purpose.
$(document).ready(function () {
$(".phys").click(function () {
if ($(".phys:last").css("visibility") == "visible") {
$(".phys").css("visibility", "");
} else {
$(".phys").css("visibility", "visible");
}
});
});`
While I could duplicate this function for all 4 subjects individually, I would prefer a more efficient solution. I am exploring the idea of declaring all divs in the following manner:
<div class="subject phys"><p> Physics </p></div>
<div class="subject chem"><p> Chemistry </p></div>
<div class="subject bio"><p> Biology </p></div>
<div class="subject math"><p> Math </p></div>
Then, upon clicking any "subject" div, a specific click() function should execute based on the subject clicked and display the corresponding "elaboration div".
I think subclassing might be a useful approach:
/* CSS */
div.subject{}
.subject.phys{}
.subject.chem{}
.subject.bio{}
.subject.math{}
Any suggestions or alternative methods to achieve this?
Edit
Here's an updated fiddle with the HTML structure close to how it will be implemented: