How to use jQuery toggle method dynamically?

Question

In my project, there are so many jQuery toggles needed for changing text and icons. Now I’m doing that using:

$("#id1").click(function () {
  //Code to toggle display and change icon and text
});

$("#id2").click(function () {
  //Same Code to toggle display and change icon and text as above except change in id
});

The problem is that I got so many to toggle, the code is quite long but all I change for each one is the id. So I was wondering if there is any way to make this simple.

Below is a sample pic. I got so many more in single page.

you need to learn when we Exactly use. w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_toggle either please post fiddle. — Chandrashekhar Komati
– Chandrashekhar Komati, Commented Oct 11, 2019 at 4:28
Please refer this link also [link]('w3schools.com/bootstrap/…) — jishan siddique
– jishan siddique, Commented Oct 11, 2019 at 4:35

fdomn-m · Accepted Answer · 2019-10-11 05:53:01Z

There are two issues here.

How to run the same action on multiple elements
How to know which element you've clicked so that you can run a relevant action on it. (most of the existing answers skip this part).

The first is to use a class for each of the elements you want to click, rather than wire up via an id. You can use a selector similar to [id^=id] but it's just cleaner to use a class.

<div id="id1" class="toggler">...

which allows you to:

$(".toggler").click(function() ...

the second is it associate the clickable with the item you want to toggle. There are many ways to do this, my preferred option is to associate them with data- attributes, eg:

<div class="togger" data-toggle="#toggle1">...

which allows you to:

$(".toggler").click(function() {
    $($(this).data("toggle")).toggle();
});

The key here is that this is the element being clicked, so you can do anything else with this such as show/hide an icon inside or change colour.

Example:

$(".toggler").click(function() {
  $($(this).data("toggle")).toggle();
  $(this).toggleClass("toggled");
});

.toggler { cursor: pointer }
.toggled { background-color: green }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toggler" data-toggle="#t1">T1</div>
<div class="toggler" data-toggle="#t2">T2</div>
<div class="toggler" data-toggle="#t3">T3</div>

<hr/>

<div id="t1" style='display:none;'>T1 content</div>
<div id="t2" style='display:none;'>T2 content</div>
<div id="t3" style='display:none;'>T3 content</div>

Chivenh · Accepted Answer · 2019-10-11 04:54:58Z

1

Oh,Can you use a class instead of id?

<ul>
  <li class="idx">A</li>
  <li class="idx">B</li>
  <li class="idx">C</li>
</ul>

$(".idx").click(function(e){
   //Code to toggle display and change icon and text
  let target = e.target;
  //You can do all what you want just base on the `target`;
});

answered Oct 11, 2019 at 4:54

Chivenh

1144 bronze badges

Comments

Snel23 · Accepted Answer · 2019-10-11 04:41:01Z

0

You can store the queries in an array, and iterate over them to perform the same JQuery operation on all of them

let ids = ["#id1", "#id2", "#id3", "#randomID"]

ids.forEach((id) => {
  console.log($(id).html())
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="id1">A</li>
  <li id="id2">B</li>
  <li id="id3">C</li>
  <li id="randomID">D</li>
</ul>

Or (If like your example) and all of the id's are actually id1, id2, id3, ... etc.

let id = "id";
let n = 3; //amount of id's

for (let i = 1; i <= n; i++) {
  console.log($("#" + id + i).html())
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li id="id1">A</li>
  <li id="id2">B</li>
  <li id="id3">C</li>
</ul>

edited Oct 11, 2019 at 4:41

answered Oct 11, 2019 at 4:35

Snel23

1,3771 gold badge10 silver badges19 bronze badges

Comments

Pushprajsinh Chudasama · Accepted Answer · 2019-10-11 06:27:45Z

-1

You can try the below code.

var num = $("#myList").find("li").length;
  console.log(num)
for(i=0;i<num;i++){
$("#id"+ i).click(function(e){
  let target = e.target;
});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<ul id="myList">
  <li id="id1">A</li>
  <li id="id2">B</li>
  <li id="id3">C</li>
</ul>

edited Oct 11, 2019 at 6:27

answered Oct 11, 2019 at 5:34

Pushprajsinh Chudasama

7,9994 gold badges23 silver badges48 bronze badges

Collectives™ on Stack Overflow

How to use jQuery toggle method dynamically?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related