javascript - How can I toggle texts and icons using jQuery? -
i have accordion.
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.
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
Post a Comment