CODEWITHSUNDEEP
jqueryhtmlcss
Isaac
Isaac

Reputation: 13

Hide/Show Divs when Clicking Other div

Hi everybody so the goal is to have a bunch of flags and when you click on each one it will show a list corresponding to it. My code is the following.

Right now it just doesn't seem to work and I'm guessing it's because I'm terrible at jQuery.

$('.canadaflag').click( function() {
    $(".canadalocations").toggleClass("viewlocationlist");
    $(".usalocations").toggleClass("hidelocationlist");
    $(".guatemalalocations").toggleClass("hidelocationlist");
    $(".colombialocations").toggleClass("hidelocationlist");
    $(".perulocations").toggleClass("hidelocationlist");
} );

$('.usaflag').click( function() {
    $(".usalocations").toggleClass("viewlocationlist");
    $(".canadalocations").toggleClass("hidelocationlist");
    $(".guatemalalocations").toggleClass("hidelocationlist");
    $(".colombialocations").toggleClass("hidelocationlist");
    $(".perulocations").toggleClass("hidelocationlist");
} );

$('.colombiaflag').click( function() {
    $(".colombialocations").toggleClass("viewlocationlist");
    $(".usalocations").toggleClass("hidelocationlist");
    $(".canadalocations").toggleClass("hidelocationlist");
    $(".guatemalalocations").toggleClass("hidelocationlist");
    $(".perulocations").toggleClass("hidelocationlist");
} );

$('.guatemalaflag').click( function() {
    $(".guatemalalocations").toggleClass("viewlocationlist");
    $(".usalocations").toggleClass("hidelocationlist");
    $(".canadalocations").toggleClass("hidelocationlist");
    $(".colombialocations").toggleClass("hidelocationlist");
    $(".perulocations").toggleClass("hidelocationlist");
} );

$('.peruflag').click( function() {
    $(".perulocations").toggleClass("viewlocationlist");
    $(".usalocations").toggleClass("hidelocationlist");
    $(".canadalocations").toggleClass("hidelocationlist");
    $(".colombialocations").toggleClass("hidelocationlist");
    $(".guatemalalocations").toggleClass("hidelocationlist");
} );

Here is the fiddle if anyone could please help.

https://jsfiddle.net/isaacflyingsquirrel/x74zq5mL/

Upvotes: 1

Views: 36

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

Working fiddle.

You could use data-* attributes to achieve that simply like :

$('.flagwrapper div').click(function() {
  var flag = $(this).attr('class');

  $('.flag').hide();
  $('div[data-location="' + flag + '"]').show();
});
.canadaflag {
  background-color: orange;
  width: 20px;
  height: 20px;
}

.usaflag {
  background-color: red;
  width: 20px;
  height: 20px;
}

.colombiaflag {
  background-color: green;
  width: 20px;
  height: 20px;
}

.peruflag {
  background-color: yellow;
  width: 20px;
  height: 20px;
}

.guatemalaflag {
  background-color: purple;
  width: 20px;
  height: 20px;
}

.flag {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="flagwrapper">
  <div class="canadaflag"></div>
  <div class="usaflag"></div>
  <div class="colombiaflag"></div>
  <div class="peruflag"></div>
  <div class="guatemalaflag"></div>
</div>

<div class="flag canadalocations" data-location="canadaflag">
  <p class="plocation">North Calgary</p>
  <p class="plocation">South Calgary</p>
  <p class="plocation">Hamilton</p>
  <p class="plocation">London</p>
  <p class="plocation">Ottawa</p>
  <p class="plocation">Victoria</p>
  <p class="plocation">Winnipeg</p>
</div>

<div class="flag usalocations" data-location="usaflag">
  <p class="plocation">Missoula</p>
  <p class="plocation">Lutz</p>
  <p class="plocation">Bozeman</p>
  <p class="plocation">Kansas City</p>
</div>

<div class="flag guatemalalocations" data-location="guatemalaflag">
  <p class="plocation">Guatemala City</p>
</div>

<div class="flag colombialocations" data-location="colombiaflag">
  <p class="plocation">Medellin</p>
  <p class="plocation">Cali</p>
  <p class="plocation">Bucaramanga</p>
  <p class="plocation">Bogota</p>
  <p class="plocation">Baranquilla</p>
  <p class="plocation">Ibague</p>
</div>

<div class="flag perulocations" data-location="peruflag">
  <p class="plocation">Lima</p>
</div>

Upvotes: 2

Chris Li
Chris Li

Reputation: 2671

It looks like you didn't import jquery so it doesn't work, click the javascript tag, then click frameworks & extensions, scroll down and look for jquery, then click run again. It should work.
Also don't use toggle class, use show()/hide() instead like

$('.peruflag').click( function() {
    $(".perulocations").show();
    $(".usalocations").hide();
    $(".canadalocations").hide();
    $(".colombialocations").hide();
    $(".guatemalalocations").hide();
} );

basically .toggleClass("viewlocationlist"); to .show() and .toggleClass("hidelocationlist"); to .hide()

Upvotes: 0

Related Questions