Edit in JSFiddle

$("div.learnmore").each(function (i, l) {
    pre = '<p class="label"><span class="arrow" style="display: inline-block">&#9654;</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").toggle();
});

$("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>