CODEWITHSUNDEEP
jqueryclass
Pedro
Pedro

Reputation: 575

5 divs, same class, show one - hide the others (not siblings)

I have 5 divs with the class "rocksMenu_zoomContainer" (not siblings). I'm using the following code:

function zoomContainers_showHide(){
if(menuItem_place === 0){
  $("#granitos_zoomContainer").show();
}
else if(menuItem_place === 1){
  $("#marmores_zoomContainer").show();
}
else if(menuItem_place === 2){
  $("#calcarios_zoomContainer").show();
}
else if(menuItem_place === 3){
  $("#compositos_zoomContainer").show();
}
else if(menuItem_place === 4){
  $("#ardosias_zoomContainer").show();
}

}

This function zoomContainers_showHide() is executed in a click (button).

This works fine, the problem is following the rule of one always visible, all others always hidden.

HTML markup:

<!-- Granitos -->

          <div id="rocksMenu_granitos" class="menuItem">
            <div id="granitos_zoomContainer" class="rocksMenu_zoomContainer"></div>
            <div id="rocksMenu_granitos_subContainer" class="menuItem_subContainer">
              <img id="granitos" class="rocksMenu_image" src="images/rocksMenu_granitos.png" alt="" />
            </div>
          </div> <!-- End of id="rocksMenu_granitos" -->

<!-- Mármores -->

          <div id="rocksMenu_marmores" class="menuItem">
            <div id="marmores_zoomContainer" class="rocksMenu_zoomContainer"></div>
            <div id="rocksMenu_marmores_subContainer" class="menuItem_subContainer">
              <img id="marmores" class="rocksMenu_image" src="images/rocksMenu_marmores.png" alt="" />
            </div>
          </div> <!-- End of id="rocksMenu_marmores" -->

<!-- Calcários -->

          <div id="rocksMenu_calcarios" class="menuItem">
            <div id="calcarios_zoomContainer" class="rocksMenu_zoomContainer"></div>
            <div id="rocksMenu_calcarios_subContainer" class="menuItem_subContainer">
              <img id="calcarios" class="rocksMenu_image" src="images/rocksMenu_calcarios.png" alt="" />
            </div>
          </div> <!-- End of id="rocksMenu_calcarios" -->

<!-- Compósitos -->

          <div id="rocksMenu_compositos" class="menuItem">
            <div id="compositos_zoomContainer" class="rocksMenu_zoomContainer"></div>
            <div id="rocksMenu_compositos_subContainer" class="menuItem_subContainer">
              <img id="compositos" class="rocksMenu_image" src="images/rocksMenu_compositos.png" alt="" />
            </div>
          </div> <!-- End of id="rocksMenu_compositos" -->

<!-- Ardósias -->

          <div id="rocksMenu_ardosias" class="menuItem">
            <div id="ardosias_zoomContainer" class="rocksMenu_zoomContainer"></div>
            <div id="rocksMenu_ardosias_subContainer" class="menuItem_subContainer">
              <img id="ardosias" class="rocksMenu_image" src="images/rocksMenu_ardosias.png" alt="" />
            </div>
          </div> <!-- End of id="rocksMenu_compositos" -->

I click the button, it shows the corresponding div but all the others remain visible. I can't figure this one out - I would use the siblings(), but they're not siblings...

Pedro

Upvotes: 0

Views: 984

Answers (4)

Nelson Ben&#237;tez Le&#243;n
Nelson Ben&#237;tez Le&#243;n

Reputation: 50573

Try the following:

function zoomContainers_showHide(){
   $(".rocksMenu_zoomContainer:visible").hide();
   $(".rocksMenu_zoomContainer").eq(menuItem_place).show();
}

Upvotes: 1

hajirazin
hajirazin

Reputation: 817

I think this will work

function zoomContainers_showHide(){
$(".rocksMenu_zoomContainer:visible").hide();
$(".rocksMenu_zoomContainer").eq(menuItem_place).show();
}

Upvotes: 2

Tomas Aschan
Tomas Aschan

Reputation: 60624

Why don't you just hide all of them, and then show the one you want to show? It will all be too fast for the user to see the difference anyway...

function showZoomContainer(id) {
    $('.menuItem').hide(); // use slide-up or whatever if you need something else.
                           // it won't matter for already hidden divs
    $('#' + id).show(); // or slide-down, or watever
}

Use like so:

// show compositos, hide all others:
showZoomContainer('rocksMenu_compositos');

Upvotes: 1

colestrode
colestrode

Reputation: 10658

This function will hide all menus, then show the one at menuItem_place:

function zoomContainers_showHide(){    
    $(".rocksMenu_zoomContainer").hide();
    $(".rocksMenu_zoomContainer:eq(" + menuItem_place +")").show();
}

Upvotes: 1

Related Questions