jQuery toggle arrow down 'ontoggle'

Question

Hi I have the following: FIDDLE

It's essentially an accordion toggle menu. What I am trying to do is rotate the arrow from the right position to a downward position once the menu has been toggled open. Upon the menu closing I would like the arrow to rotate back its rightward position. I have tried doing it by finding the CSS and

transform: rotate(-90deg)

However, the position of the arrow does not change. Thoughts? This is the <script>

//Dekstop Content
$('.content').each(function () {
    var $accordian = $(this);
    $accordian.find('.view').on('click', function () {
        $accordian.find('.content-body').slideUp();
        $accordian.find('span').css("transform", 'rotate(0deg);');
        if (!$(this).next().is(':visible')) {
            $(this).next().slideDown();
            $(this).find('span').css({"transform": 'rotate(90deg);'})
        }
    });
});

Answer 1

The .css should look like this: .css('Property-Name','Value')

Try this code:

//Dekstop Content
$('#content').each(function () {
    var $accordian = $(this);
    $accordian.find('.view').on('click', function () {
        $accordian.find('.content-body').slideUp();
        $accordian.find('span').css('transform','rotate(0deg)'); // Changed
        if (!$(this).next().is(':visible')) {
            $(this).next().slideDown();
            $(this).find('span').css('transform', 'rotate(90deg)'); // Changed
        }
    });
});

Greetings from Vienna