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

Solution 1:

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:

functionswap3(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"}); });
}

Solution 2:

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

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

Solution 3:

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 ;-)

Solution 4:

Original:

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

jQuery:

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

jQuery Classes:

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

Solution 5:

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><divclass="product-details"><areashape="rect"onClick="swap3('product-   
details','product-specs');"></div><divclass="product-specs"><p>Content</p></div></div><div><divclass="product-details"><areashape="rect"onClick="swap3('product-   
details','product-specs');"></div><divclass="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 showvar $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!