JSFiddle - React, Tailwind, and code Playground

by Tentonaxe

HTML

<div class="sitesection">
    <p class="expand-one"><a href="#">Click Here To Display The Content</a> <img src="images/arrow.png" /></p>
    <p class="content-one">This is the content that was hidden before, but now is... Well, visible!"</p>
</div>

CSS

p.content-one {
    display:none;
}

JavaScript

$('.expand-one').toggle(function() {
    $('.content-one').slideDown('slow');
    $(this).find("img").css({
        "-webkit-transform": "rotate(180deg)",
        "-moz-transform": "rotate(180deg)",
        "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"
    });
}, function() {
    $('.content-one').slideUp('slow');
    $(this).find("img").css({
        "-webkit-transform": "rotate(0deg)",
        "-moz-transform": "rotate(0deg)",
        "filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
    });
});
/*
 -webkit-transform: rotate(270deg);

-moz-transform: rotate(270deg);

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
*/