JSFiddle - React, Tailwind, and code Playground
HTML
<p class="toggle">Show Panel <img src="http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png"></p>
<div class="hidden">
Blah Blah Blah
</div>
CSS
.hidden {
display: none;
}
JavaScript
/* $(".toggle").click(function(){
$(".hidden").slideToggle("slow");
$(this).find('img').attr('src',function(i,src){
return (src.indexOf('plusSign.gif') != -1)? 'minusSign.gif' : 'plusSign.gif';
})
}); */
$(".toggle").click(function(){
$(".hidden").slideToggle("slow");
$(this).html(function(i,html) {
if (html.indexOf('Show') != -1 ){
html = html.replace('Show','Hide');
} else {
html = html.replace('Hide','Show');
}
return html;
}).find('img').attr('src',function(i,src){
return (src.indexOf('plus.png') != -1)? 'http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png' :'http://t3.gstatic.com/images?q=tbn:4TZreCjs_a1eDM:http://www.venice.coe.int/images/plus.png';
});
});