javascript - How can I toggle texts and icons using jQuery? -


i have accordion.

enter image description here

when click on show details :

  • the accordion content expand,
  • the text change show details hide details
  • the icon change + x
  • click on again should toggle original state.

enter image description here

i couldn't work. when click on it, stuck on hide details state forever.


js
 $(".show-details-sk-p").click(function () {      $(".show-details-txt-sk-p-r").text("hide details");      $(".icon-sk-p-r-toggle").attr("src", "http://s6.postimg.org/e9eydpbct/remove.png");  }); 

can please give me little push here ?

i've put fiddle - in case needed.

inspected aciton , element behavior, find #sk-p-r have class in decide whether collapsed or not.

 $(".show-details-sk-p").click(function () {      var iscollapse = $('#sk-p-r').hasclass('in');      var text = iscollapse ?  'show details' : 'hide details';      var img = iscollapse ? 'http://s6.postimg.org/e9eydpbct/plus.png' : 'http://s6.postimg.org/bglqtob0d/remove.png'      $(".show-details-txt-sk-p-r").text(text);      $(".icon-sk-p-r-toggle").attr("src", img);  }); 

Comments

Popular posts from this blog

PHP DOM loadHTML() method unusual warning -

python - How to create jsonb index using GIN on SQLAlchemy? -

c# - TransactionScope not rolling back although no complete() is called -