CODEWITHSUNDEEP
jquerytogglehideshow
Miko Nimations
Miko Nimations

Reputation: 3

how to rotate icon arrow in jquery show hide toggle?

there..

I want to ask you? how to rotate the arrow icon in jquery show hide toggle? I've tried it here: http://jsfiddle.net/mikonimations/EzQsG/

<section id="evenmorelinks"><h1><div class="arrow before"></div><a id="show-title" onclick="false">Show More</a><div class="arrow after"></div></h1></section>

<div id="cnt" style="display: none" class="fcolcontainer2">
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div>
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div>
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div>
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div>
<div class="f2segment"><h2>Example block</h2><span><a>333</a></span></div>
<div class="f2segment"><h2>Finish block</h2><span><a>333</a></span></div>

This Jquery

 (function ($) {
      $(document).ready(function() {
      $("#show-title").click(function () {
         if ($('#cnt').is(":visible")) {
             $(this).html($(this).html().replace(/Hide/, 'Show'));
         } else {
             $(this).html($(this).html().replace(/Show/, 'Hide'));
         }
         // Do it afterwards as the operation is async
         $("#cnt").slideToggle("fast");
      });
  });

but have not been successful. Please help me! Thanks..

Upvotes: 0

Views: 4857

Answers (1)

guessimtoolate
guessimtoolate

Reputation: 8642

There's a lot of stuff going on in there, but if I read your intention it boils down to adding expanded class to one of the parent elements. Try this:

$("#show-title").click(function () {
    $(this).parents('#evenmorelinks').toggleClass('expanded');
    // Do it afterwards as the operation is async
    $("#cnt").slideToggle("fast");
});

working example.

Upvotes: 1

Related Questions