Ways to switch the state of one element while causing other elements to respond

Here is the code snippet I am working with:

function myFunction(x) {
  x.classList.toggle('change');
}
body,
hmtl {
  background- color: black;
}

.text {
  color: Black;
}

a {
  text-decoration: none;
}

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 90px;
  background-color: blue;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
  height: 100px;
  position: relative;
  top: -100px;
  width: 200px;
  background- color: blue;
  border-radius: 100px;
}

.change .bar2 {
  transform: rotate(3000deg);
  width: 100px;
  height: 200px;
  position: relative;
  left: 200px;
  background-color: blue;
  top: -100px;
  border- radius: 100px;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: blue;
  width: 200px;
  height: 200px;
  position: relative;
  left: 100px;
  bottom: 200px;
  opacity: 1! important;
  border-radius: 100px;
}

.change .text {
  color: black;
  font-size: 10px;
  position: relative;
  top: -200px;
  background-color: green;
  display: block;
}
<a id="mobile-nav" href="#">
  <div class="container" onclick="myFunction(this)">
    <div class="bar1">
      <p class="details"></p>
    </div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="text">Hello</div>
  </div>
</a>

I am trying to achieve a functionality where only the first element .bar1 can be toggled while the other two elements .bar2 and .bar3 react accordingly. However, I am facing issues as currently all three elements toggle at once even though they are part of different containers. How can I establish separate containers for each element and still have them linked so that when one is clicked, the others react in response?

javascripthtmlcss

Answer №1

To add the event listener to the container and ensure it only triggers when the event target matches the desired element, you can do the following:
There are various methods to accomplish this by storing variables and attaching event listeners in different ways, depending on your specific goal.

If you prefer using onclick as demonstrated in your example: 

function myFunction(this1, x) {
  if(x.target.matches('.bar1'))
    this1.classList.toggle('change');
}
body,
hmtl {
  background- color: black;
}

.text {
  color: Black;
}

a {
  text-decoration: none;
}

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 90px;
  background-color: blue;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
  height: 100px;
  position: relative;
  top: -100px;
  width: 200px;
  background- color: blue;
  border-radius: 100px;
}

(change .bar2 {
  transform: rotate(3000deg);
  width: 100px;
  height: 200px;
  position: relative;
  left: 200px;
  background-color: blue;
  top: -100px;
  border- radius: 100px;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: blue;
  width: 200px;
  height: 200px;
  position: relative;
  left: 100px;
  bottom: 200px;
  opacity: 1! important;
  border-radius: 100px;
}

.change .text {
  color: black;
  font-size: 10px;
  position: relative;
  top: -200px;
  background-color: green;
  display: block;
}
<a id="mobile-nav" href="#">
  <div class="container" oncick="myFunction(this,event)">
    <div class="bar1">
      <p class="details"></p>
    </div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="text">Hello</div>
  </div>
</a>

Alternatively, if you choose to use addEventListener: 

function myFunction(x) {
  if(x.target.matches('.bar1'))
    this.classList.toggle('change');
}

document.querySelector('.container').addEventListener('click',myFunction);
body,
hmtl {
  background- color: black;
}

.text {
  color: Black;
}

a {
  text-decoration: none;
}

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 39px;
  height: 30px;
  border-radius: 90px;
  background-color: blue;
  margin: 20px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-345deg) translate(-9px, 6px);
  height: 100px;
  position: relative;
  top: -100px;
  width: 200px;
  background- color: blue;
  border-radius: 100px;
}

.change .bar2 {
  transform: rotate(3000deg);
  width: 100px;
  height: 200px;
  position: relative;
  left: 200px;
  background-color: blue;
  top: -100px;
  border- radius: 100px;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
  background-color: blue;
  width: 200px;
  height: 200px;
  position: relative;
  left: 100px;
  bottom: 200px;
  opacity: 1! important;
  border-radius: 100px;
}

.change .text {
  color: black;
  font-size: 10px;
  position: relative;
  top: -200px;
  background-color: green;
  display: block;
}
<a id="mobile-nav" href="#">
  <div class="container">
    <div class="bar1">
      <p class="details"></p>
    </div>
    <div class="bar2"></div>
    <div class="bar3"></div>
    <div class="text">Hello</div>
  </div>
</a>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Rails does not transfer data-attributes in HTML5

I have a layout set up to show users: %table.table %tbody - @users.each do |user| %tr %td= avatar_tag user, {small:true, rounded:true} %td = username user .online-tag = user.online? %td= ...

javascriptjqueryruby-on-railshtml

Switch out div elements for td elements in HTML code

I have written a code snippet that successfully toggles between showing and hiding content. Here is the code: Simple collapsible Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliq ...

htmlhtml-table

I am attempting to assign a default value to a TextField by retrieving data from a GetMapping call in React, however, the value is not being successfully set

I am facing an issue with setting a default value for a TextField in my code. Even though I am trying to populate it with data from a GetMapping call, the value is not being set as expected. Here is the JSON response I receive from the API call: { "id": 1 ...

javascripthtmlreactjsmaterial-ui

What is the CSS technique for displaying text overflow after displaying only two lines within a div?

Currently working on a webpage design where I am looking to display text overflow using ellipsis within a div. However, my requirement is to display two lines of data in the div before handling the text overflow. I prefer not setting a fixed height for t ...

jqueryhtmlcss

The header() function triggers automatic page redirection instead of waiting for the form to be submitted

When I created a form that automatically sends an email upon submission, my goal was to direct the user to a thank you page after the email is sent. In my search for a solution, I stumbled upon the header() function in php and attempted to use it with the ...

javascriptphpformsemail

Extracting information from AJAX calls using a DataTable

When it comes to creating CRUD tables in school, I've always used scaffolding per page. However, I recently wanted to experiment with performing all operations without using Partial View. I decided to implement AJAX by following a tutorial on Everyth ...

javascriptjsonajaxasp.net-mvcdatatables

Is it possible for the versions in the package.json file to be altered

I've made updates to my package.json file - all packages are listed as follows: "dependencies": { "@apollo/client": "3.6.4", "bootstrap": "4.6.2", "graphql": "16.5.0" } ...

javascriptnpmpackage-lock.json

getting the child td element within a tr using a variable that changes dynamically

I'm facing an issue where I am trying to access the <td> of a <tr> using the jQuery .eq() function. The code snippet below illustrates what I am attempting: var foundElement = 3; var values = $(this).children("td:nth-child('" + foun ...

javascriptjqueryparent-child

Utilize Lodash to iterate through functions in a loop and retrieve the first matching result

I am looking to iterate through an array of objects and call a method on them. If the result of that method meets certain conditions, I want to immediately return that result. The current implementation is as follows: public getFirstMatch(value: string, a ...

javascripttypescriptlodash

Issue with interaction between php and jQuery on click event

I had been facing a challenge with this issue (after checking this site) where I discovered that I forgot to use .on to delegate a click function that should be triggered when clicking on a piece of dynamically generated HTML in PHP. I have now included t ...

jqueryhtml

Utilizing SVG within Sproutcore allows for seamless access to DOM nodes and the ability to effortlessly bind Sproutcore events directly to the DOM

Exploring Sproutcore, I am delving into the world of SVG (Standard Vector Graphics) integration within the app. The goal is to utilize a canvas for drawing elements like lines, boxes, and images, all of which SVG offers. My approach involved incorporating ...

javascriptjquerysvgsproutcoresproutcore-views

When clicking on a div with the CSS property user-select set to none, the selected text in a contenteditable element is

I'm currently working on a unique JavaScript rich text editor that utilizes div elements with the CSS property user-select: none instead of traditional buttons. While this approach works perfectly in Firefox, I've encountered a major issue with G ...

htmlcssgoogle-chromecontenteditable

I'm having trouble getting my HTML page to display appended text. What could be causing the issue?

let mainDiv = document.getElementById("main"); let myParagraph = document.createElement("p"); let myTextNode = document.createTextNode("hello"); myParagraph.append(myTextNode); mainDiv.append(myParagraph); let max = 25; let on ...

javascripthtml

Configuring Next-auth CredentialProvider and setting up redirection

I'm feeling a bit lost when it comes to understanding how the credentials provider and redirects work. The documentation mentions that the credentials provider doesn't support a callback and is specifically for OAuth providers, which I understand ...

javascriptnext.jsnext-auth

I'm attempting to switch between different "screens" by utilizing divs with CSS and JavaScript, using the display property to toggle between none and block. Everything seems to be functioning smoothly except for the

I thought I grasped the concept of this because all my toggles are working fine, except for the last one. The frustrating part is that it's written in the same manner as the others before it. The problematic button is identified by id="startYearOne". ...

javascripthtmlcssdisplayhoisting

Design a unique border for a div element that extends a top-border all the way through the header and a bottom-border that

I am trying to achieve the design displayed in this mockup: https://i.sstatic.net/sYEPu.png Here is my current progress: https://codepen.io/raney24/pen/VOmjBY .header-border { width: 100%; margin-bottom: 10px; border-left: red solid 1px; border ...

htmlcssborder

How can I display a pattern using Javascript?

Can you help me create a JavaScript program using a for loop to print a pattern with n number of asterisks and numbers like this: 1 2 3\n 4 5 6 \n 7 8 9 ...

javascriptangularjs

Storing the result of parsing JSON data into a global variable

$(function() { var countFromData = 0; getReminder(); alert(countFromData); }); function getReminder() { $.getJSON("<?=base_url()?>home/leavereminder", {}, function(data) { ...

javascriptjqueryjson

The Javascript function is triggered only upon the second click

My goal is to retrieve prescription details for a specific patient, with the results displayed in a modal window. However, I am encountering an issue where the first result is only obtained on the second click. Subsequent clicks display the results of the ...

javascriptjqueryhtml

Which is better for integrating Google Maps API - JavaScript or PHP?

Is it better to use JavaScript or PHP with the Google Maps API? What are the advantages and disadvantages of each? If I have geocodes stored in a database, should I retrieve them using Ajax and process them with JavaScript, or is PHP a better option? The ...

phpjavascriptajaxapigoogle-maps