Bootstrap 4 change icon in collapse
The problem is: all your button
and .collapse
elements are in the same DOM level, which means when .collapse
's shown.bs.collapse
or hidden.bs.collapse
event is fired, the $(this).parent()
in the event handler point to .collapse
's parent -- the most outside one that is not displayed in your code. Let's make it as OUTER
. Then, when you invoke find
, removeClass
and addClass
on OUTER
, all icons will be changed, which is why "it didn't work".
To fix this issue, you need to make a unit wrapper which contains a group of button
and .collapse
elements. In this way, $(this).parent()
will point to the group and only the clicked button icon is changed.
I've made a jsfiddle for the fix, please check.
Nurzhan Nogerbek
✌️ Hello, friend! I am glad to see you on my personal StackOverflow profile. My name is 𝗡𝘂𝗿𝘇𝗵𝗮𝗻. 🏠 I am living in 𝗔𝗹𝗺𝗮𝘁𝘆 🍎 and I am from 𝗞𝗮𝘇𝗮𝗸𝗵𝘀𝘁𝗮𝗻 🇰🇿. 👦🏻 Since I first wrote my first piece of code in 𝗧𝘂𝗿𝗯𝗼 𝗣𝗮𝘀𝗰𝗮𝗹 as a child using my father's personal computer in 𝗪𝗶𝗻𝗱𝗼𝘄𝘀 𝟵𝟱, software development has become my passion. ⏱ I still live with this passion in the commercial software development industry, where I have been working for 𝟱+ years. 🏢 I started my career from developing multi-user web applications for the outsourcing company 𝗥𝘂𝗯𝗶𝘂𝘀 in 2015. 🏦 Then I worked for 1.5 years in the 𝗞𝗮𝘇𝗮𝗸𝘀𝘁𝗮𝗻 𝗦𝘁𝗼𝗰𝗸 𝗘𝘅𝗰𝗵𝗮𝗻𝗴𝗲 in FinTech projects. During this short time, I managed to develop 𝟰 financial and analytical web projects for the company. 📡 I worked for the largest telecommunications company in Central Asia from 2018 to 2020. I am proud to have participated in the creation of 𝟳 scalable distributed Big Data systems in a microservice architecture at 𝗩𝗘𝗢𝗡 company. 🚀 Since the fall of 2020, I have been involved in the development of a fast-growing and promising startup at 𝗦𝗺𝗮𝗿𝘁𝗟𝗮𝗯 company. 🛠 I usually use 𝗚𝗼𝗹𝗮𝗻𝗴 for 𝗕𝗮𝗰𝗸𝗲𝗻𝗱 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁, 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 for 𝗙𝗿𝗼𝗻𝘁𝗲𝗻𝗱 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗺𝗲𝗻𝘁, 𝗦𝗰𝗮𝗹𝗮 for 𝗗𝗮𝘁𝗮 𝗘𝗻𝗴𝗶𝗻𝗲𝗲𝗿𝗶𝗻𝗴, and 𝗣𝘆𝘁𝗵𝗼𝗻 for 𝗗𝗮𝘁𝗮 𝗦𝗰𝗶𝗲𝗻𝗰𝗲. 📚 I have a 𝗠𝗮𝘀𝘁𝗲𝗿'𝘀 𝗗𝗲𝗴𝗿𝗲𝗲 in 𝗖𝗼𝗺𝗽𝘂𝘁𝗲𝗿 𝗦𝗰𝗶𝗲𝗻𝗰𝗲 from 𝗧𝗼𝗺𝘀𝗸 𝗣𝗼𝗹𝘆𝘁𝗲𝗰𝗵𝗻𝗶𝗰 𝗨𝗻𝗶𝘃𝗲𝗿𝘀𝗶𝘁𝘆 in Russia. 🤖 I have implemented 𝟭𝟱+ successful web projects that have made life easier for thousands of users. You can easily find details of these projects in my GitHub profile. 📩 Feel free to contact me with your ideas and suggestions!
Updated on June 04, 2022Comments
-
Nurzhan Nogerbek almost 2 years
I use bootstrap 4 alpha 6 version. In my page I have several collapse blocks. I want to change icon when user open/close that block. As I have several of these blocks I used class but it didnt work. Whats wrong I did? P.S. When I use id in JS works fine, but as you see I have several collapse block and dont want to "copy & paste".
html:
<div class="card"> <div class="card-header"> <div class="d-flex align-items-center justify-content-between"> <button data-toggle="collapse" data-target="#collapse-projects" aria-expanded="false" aria-controls="collapse-projects"> <i class="fa fa-eye" aria-hidden="true"></i> </button> </div> </div> <div class="card-block"> <div class="collapse" id="collapse-projects"> ***SOME CONTENT*** </div> </div> </div> <div class="card"> <div class="card-header"> <div class="d-flex align-items-center justify-content-between"> <button data-toggle="collapse" data-target="#collapse-tasks" aria-expanded="false" aria-controls="collapse-tasks"> <i class="fa fa-eye" aria-hidden="true"></i> </button> </div> </div> <div class="card-block"> <div class="collapse" id="collapse-tasks"> ***SOME CONTENT*** </div> </div> </div>
JS:
$(document).ready(function () { $('.collapse') .on('shown.bs.collapse', function() { $(this) .parent() .find(".fa-eye") .removeClass("fa-eye") .addClass("fa-eye-slash"); }) .on('hidden.bs.collapse', function() { $(this) .parent() .find(".fa-eye-slash") .removeClass("fa-eye-slash") .addClass("fa-eye"); }); });