Why doesn't my div swap by .class work?

Having trouble converting the following code from dealing with IDs to Classes.

Basicly what the code does is reveals one Div while hiding another.

In the original version it was simple because the div location was absolute.

With the classes version I need to reveal the next instance of 'product-specs' based on which DIV the onClick was located.

NOTE/EDIT: Their are multiple versions of the same classes on the page. So references to the classes must be specific to the closest instance of the class, based on开发者_如何学编程 the location of the link that was clicked.

HTML:

<div id="product-details">
    <area shape="rect" onClick="swap3('product-details','product-specs');">
</div>
<div id="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";
}

However now I need to add multiple instances of product details Div & Products 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:

????????

---

Note: (I explain the complete code befoe here, so just put the updated here) remember that when your selector is a className, you will got an array! change the code like this and test again:

function swap3(currentDivId ,oldDivId, newDivId) {
    var oldDiv = $(currentDivId).nextAll("div." + oldDivId);
    var newDiv = $(currentDivId).nextAll("div." + newDivId);
    $(oldDiv).each(function(){ $(this).css({"display" : "none"}); });
    $(newDiv).each(function(){ $(this).css({"display" : "block"}); });
}

---

In native JavaScript, you'd use getElementsByClassName() -- but it's not supported in IE up thru version 8. You can use a purpose-built wrapper script like this one, or use a library like jQuery to abstract away the browser differences.

In jQuery, try something like

function swap( oldClassName, newClassName ) {
    $("'." + oldClassName + "'").hide();
    $("'." + newClassName + "'").show();    
}

---

To hide the 'details' div and show the immediately-following div, assumed to be 'specs', try this jQuery snippet. It attaches a click handler to every 'product-details' div, and when it fires, it hides that div and shows its immediate sibling:

$(".product-details").click( function() {
    $(this).hide();
    $(this).next().show();
});

The reverse behavior (hiding the specs and showing the details) is left as an exercise for the reader ;-)

---

Original:

function swap3(oldDivId, newDivId) {
    var oldDiv = document.getElementById(oldDivId);
    var newDiv = document.getElementById(newDivId);
    oldDiv.style.display = "none";
   newDiv.style.display = "block";
}

jQuery:

function swap3(oldDivId, newDivId) {
    var $oldDiv = $('#' + oldDivId);
    var $newDiv = $('#' + newDivId);
    $oldDiv.hide();
    $newDiv.show();
}

jQuery Classes:

function swap3(oldDivClass, newDivClass) {
    var $oldDiv = $('.' + oldDivClass);
    var $newDiv = $('.' + newDivClass);
    $oldDiv.hide();
    $newDiv.show();
}

---

Something else you can do is to wrap each of your products inside a div without any class or id. It does make sense to group them like that, something like

<div>    
    <div class="product-details">

        <area shape="rect" onClick="swap3('product-   
details','product-specs');">

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>

</div>

<div>
    <div class="product-details">

        <area shape="rect" onClick="swap3('product-   
details','product-specs');">

    </div>

    <div class="product-specs">

        <p>Content</p>

    </div>
</div>

Note the extra wrapping divs. Now, you can use the parent element to identify the product specs that you have to show. E.g.: (Maybe there's a better way to do it)

$('.product-details').click(function() {
    // Find the specs to show
    var $specs = $(this).siblings('.product-specs');
    // Hide the other ones
    $('.product-specs').not($specs).hide();
    // Show the one that you want
    $specs.show();
});

Hope it works!