Struggling to convert this code from working with IDs to Classes.
The code reveals one Div while hiding another based on the onClick event.
Originally, it was straightforward because the div location was absolute.
In the classes version, I need to reveal the next instance of 'product-specs' depending on the DIV where the onClick occurred.
PLEASE NOTE: There are multiple instances of the same classes on the page. References to the classes must be specific to the closest instance of the class, based on the location of the clicked link.
HTML:
<div class="product-details">
<area shape="rect" onClick="swap3('product-details','product-specs');">
</div>
<div class="product-specs">
<p>Content</p>
</div>
Javascript:
function swap3(oldDivId, newDivId) {
var oldDiv = document.getElementById(oldDivId);
var newDiv = document.getElementById(newDivId);
oldDiv.style.display = "none";
newDiv.style.display = "block";
}
Now, I'll need to incorporate multiple instances of product details and product specs.
New HTML:
<div class="product-details">
<area shape="rect" onClick="swap3('product- details','product-specs');">
</div>
<div class="product-specs">
<p>Content</p>
</div>
<div class="product-details">
<area shape="rect" onClick="swap3('product- details','product-specs');">
</div>
<div class="product-specs">
<p>Content</p>
</div>
New Javascript:
????????