Kalim Kalim - 3 months ago 14
HTML Question

Open different divs on click

I searched for a way to show a DIVs content after clicking an image. I found a solution on JSFiddle here.

Now I'm trying to get it to work for 3 DIVs. That's how I've done that:



<script>
$("#lol_team").hide();
$("a").on("click", function(e){
e.preventDefault();
$("#lol_team").toggle();
});
</script>
<script>
$("#csgo_team").hide();
$("a").on("click", function(e){
e.preventDefault();
$("#csgo_team").toggle();
});
</script>
<script>
$("#cod_team").hide();
$("a").on("click", function(e){
e.preventDefault();
$("#cod_team").toggle();
});
</script>

<!-- first team -->

<a href="#"><img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/></a> <div id="csgo_team">
<h2>CS:GO Team Lineup:</h2>
</div>

<!-- second team -->

<a href="#"><img src="./img/team_lol.png" alt="League of Legends"/></a>
<div id="lol_team">
<h2>Leage of Legends Team Lineup:</h2>
</div>

<!-- thrid team -->

<a href="#"><img src="./img/team_cod.png" alt="Call of Duty"/></a>
<div id="cod_team">
<h2>Call of Duty Team Lineup:</h2>
</div>





When I click at the firs/second/third div, all of them will open/close. What do I need to change so they will open/close one by one?.

Answer

Calling $("a").on("click") will attach the click event to all <a>'s on the page. You only want one anchor to effect one div, so you should attach ID's to all of them, and add the event to toggle them after. See the following updated code:

$("#lol_team").hide();
$("#lol_team_anchor").on("click", function(e){
  e.preventDefault();
  $("#lol_team").toggle();
});
$("#csgo_team").hide();
$("#csgo_team_anchor").on("click", function(e){
  e.preventDefault();
	$("#csgo_team").toggle();
});
$("#cod_team").hide();
$("#cod_team_anchor").on("click", function(e){
  e.preventDefault();
	$("#cod_team").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->

<a href="#" id="csgo_team_anchor"><img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/></a>	<div id="csgo_team">
  <h2>CS:GO Team Lineup:</h2>
</div>

<!-- second team -->

<a href="#" id="lol_team_anchor"><img src="./img/team_lol.png" alt="League of Legends"/></a>
<div id="lol_team">
  <h2>Leage of Legends Team Lineup:</h2>
</div>

<!-- thrid team -->

<a href="#" id="cod_team_anchor"><img src="./img/team_cod.png" alt="Call of Duty"/></a>
<div id="cod_team">
  <h2>Call of Duty Team Lineup:</h2>
</div>

Ideally though, you can simplify this to something like below:

//Hide all divs with class of 'toggleContainer' by default:
$('div.toggleContainer').hide();

//Attach a click event to all anchors with class of 'toggle'
$('a.toggle').on('click', function(e) {
  //Ignore the click (Prevent it from trying to load whatever is in 'href'. If it's '#' (This will prevent the page from going to the top)
  e.preventDefault();
  //Get the associated toggle container for this anchor
  $(this).next('div.toggleContainer').toggle();
});

//Hide all toggleContainers by default:
$('div.toggleContainer').hide();

$('a.toggle').on('click', function(e) {
  e.preventDefault();
  //Get the associated toggle container for this anchor
  $(this).next('div.toggleContainer').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- first team -->

<a href="#" class="toggle"><img src="./img/team_csgo.png" alt="Counter Strike Global Offensive"/></a>
<div class="toggleContainer">
  <h2>CS:GO Team Lineup:</h2>
</div>

<!-- second team -->

<a href="#" class="toggle"><img src="./img/team_lol.png" alt="League of Legends"/></a>
<div class="toggleContainer">
  <h2>Leage of Legends Team Lineup:</h2>
</div>

<!-- thrid team -->

<a href="#" class="toggle"><img src="./img/team_cod.png" alt="Call of Duty"/></a>
<div class="toggleContainer">
  <h2>Call of Duty Team Lineup:</h2>
</div>

Comments