Hide/Show Divs when Clicking Other div

Question

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/

Answer 1

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> 

Answer 2

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