$("div.learnmore").each(function (i, l) { pre = '<p class="label"><span class="arrow" style="display: inline-block">▶</span> Learn More</p><div class="learnmore inner">'; post = '</div></p>'; l = $(l); if (l.children("p.label").length === 0) { l.html(pre.concat(l.html(), post)); } l.children("span.arrow").each(function (i, l) { degree = $(this).siblings(".inner").is(':visible') ? 0 : 90; target = $(this).children("span.arrow"); rotate(target, degree); }); }); var rotate = function (target, degree) { target.css({ 'transform': 'rotate(' + degree + 'deg)' }); }; $("div.learnmore > p.label").click(function () { degree = $(this).siblings(".inner").is(':visible') ? 0 : 90; target = $(this).children("span.arrow"); rotate(target, degree); $(this).siblings(".inner").slideToggle(); }); $("div.learnmore > p.label").each(function () { rotate($(this).children("span.arrow"), $(this).siblings(".inner").is(':visible') ? 90 : 0); });
<div class="learnmore">This is the explanatory text. There probably should be a lot more text here, but I'll keep it simple for the moment.</div> <div> <p>This is just a random paragraph to take up space</p> </div> <div class="learnmore">This is a second set of explanatory text that has its own Learn More text to click to hide/show</div>