Jquery Toggle() , Button I Want Click On 1 Button And Hide All Other Div

When I click on a particular button, I want to hide all other

s. wish when i click on 1 button is close other div open wish only 1 div open at time i will have 21 mor

Solution 1:

Do you want something like this? You don't need to add click handlers to each individual div. Just get the index of the button clicked and show the div with that index.

$(document).ready(function() {
  $(".poz button").click(function() {
    var i = $(this).index();
    
    $(".fichier").hide();
    $(".fichier").eq(i).show();
  });
});

.fichier {
  display: none;
  position: absolute;
  top:0;
  left:0;
  height: 100%;
  width: 100%;
}

.poz {
  position: absolute;
  width: 50%;
  height: 64px;
  overflow-x: scroll;
  bottom: 0;
  right: 0;
}

.btna {
  width: 19%;
  height: 50px;
}

.droite {
  background: purple;
  float: right;
  width: 50%;
  height: 100%;
}

.gauche {
  background: orangered;
  float: left;
  width: 50%;
  height: 100%;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><divclass="fichiers"><divclass="fichier"><divclass="droite">droite1</div><divclass="gauche">gauche1</div></div><divclass="fichier"><divclass="droite">droite2</div><divclass="gauche">gauche2</div></div><divclass="fichier"><divclass="droite">droite3</div><divclass="gauche">gauche3</div></div><divclass="fichier"><divclass="droite">droite4</div><divclass="gauche">gauche4</div></div></div><divclass="poz"><buttonclass="btna">arme 1</button><buttonclass="btna">arme 2</button><buttonclass="btna">arme 3</button><buttonclass="btna">arme 4</button></div>

Share