Toggle the visibility of div elements by clicking on another div

Question

Toggle the visibility of div elements by clicking on another div

Hey everyone, I have this cool concept where clicking on different flags will reveal a corresponding list. However, my jQuery code doesn't seem to be functioning properly.

$('.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");
} );

If anyone could take a look and assist me with this, here is the link to the fiddle:

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

jquery html css

Answer 1

Answer №1

Check out this interactive example.

If you want to implement this functionality, you can make use of HTML data attributes like shown below:

$('.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

Check out this interactive example.

If you want to implement this functionality, you can make use of HTML data attributes like shown below:

$('.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 3

Answer №2

Seems like jquery wasn't imported, which is why it's not working. Click on the javascript tag, then go to frameworks & extensions, scroll down until you find jquery, and run it again. It should start working.
Also, avoid using toggle class; instead, use show()/hide() as shown below:

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

Replace .toggleClass("viewlocationlist"); with .show() and .toggleClass("hidelocationlist"); with .hide()

Answer 4

Seems like jquery wasn't imported, which is why it's not working. Click on the javascript tag, then go to frameworks & extensions, scroll down until you find jquery, and run it again. It should start working.
Also, avoid using toggle class; instead, use show()/hide() as shown below:

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

Replace .toggleClass("viewlocationlist"); with .show() and .toggleClass("hidelocationlist"); with .hide()

Toggle the visibility of div elements by clicking on another div

Answer №1

Answer №2

Similar questions

How can I incorporate my styles into a separate css file for use in a React project?

Are there any web browsers that automatically switch to a non-SSL connection if an attempt to connect with SSL

Getting HTML from Next.js middleware - a step-by-step guide

Triggering a class in Angular when another class is activated through JavaScript

capture the alteration of text within an input field

Is there a way to showcase an HTML body in the Gmail app on iOS?

Console does not display AJAX response

Issue encountered: Inoperable binding when employing ko.mapping with two distinct models

The browser prevented the script located at “http://127.0.0.1:5500/assets/platform.png” from loading due to an invalid MIME type of “image/png”

Having trouble getting your Bootstrap v4 carousel to function properly?

Trouble with CSS loading due to div in Visual Studio MVC

Angular-UI keypress event allows users to interact with components and

"How to prevent users from using the back button on Google Chrome and Edge browsers

What is the best way to generate a linked list from a JSON array?

Internet Explorer will automatically apply a blue border to a div element when a CSS gradient is utilized

Activate scroll event when image src changes in Angular using jQuery

Adjustable icon dimensions in Material-UI

Script tag causing browser to send unwanted request

What is the best way to create stylish corners on my website?

Customize Selected Options in Multi SelectPicker in Real-Time