JQuery Toggle Icons

Question

Hi I am extremely new to javascript and am trying to use the toggle function to not only provide show/hide functionality but also to toggle the arrow icons. For example, when the link says More there is a right arrow next to it "More -->" and when the link is clicked it changes to "Less ^" with an up arrow. I'm using icomoon fonts for the right and up arrows.

Here is my code so far and the show/hide functionality works properly but I think there must be a better way to toggle the arrows. When I first look at my site, the arrow appears but as soon as I click the link the arrow disappears and I end up seeing the HTML code instead of the arrow. I'd share a link but I'm working in a sandbox behind authentication:

    // choose text for the show/hide link
    var showText='More' + ' <span class="icon-arrow-right2"></span>';
    var hideText='Less' + ' <span class="icon-arrow-up2"></span>';

    // append show/hide links to the element directly preceding the element   
    with a class of "toggle"
    $(".toggle").prev().append(' (<a href="#"  
    class="toggleLink">'+showText+'</a>)');

    // hide all of the elements with a class of 'toggle'
    $('.toggle').hide();

   // capture clicks on the toggle links
   $('a.toggleLink').click(function() {

   // change the link text depending on whether the element is shown or hidden
   if ($(this).text()==showText) {
   $(this).text(hideText);
   $(this).parent().next('.toggle').slideDown('fast');
   }
   else {
   $(this).text(showText);
   $(this).parent().next('.toggle').slideUp('fast');
   }  

And my CSS looks like this:

    /* Main toggle */
    .toggle { 
      font-size: 14px;
      line-height:20px;
      font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial,   
      sans-serif;
      background: #ffffff; /* Main background */
      margin-bottom: 10px;
      padding:5px;
      border: 1px solid #e5e5e5;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px; 
    }

    /* Adding a right arrow to the More text */
    .icon-arrow-right2:before {
      content: "\ea3c";
    }

   /* Adding Up arrow to Less text */
    .icon-arrow-up2:before {
      content: "\ea3a";
    }

Thanks so much for your time and input!

Answer 1

You can use toggle() and toggleClass() to handle changing what is displayed and how on a click.

For example:

 // When the toggleLink is clicked, we'll toggle classes/text. $('.toggleLink').click(function () { /* Check if the showText class also has the hide class. We can use that to toggle text. Another way to do this is use the :visible selector on what we are hiding and showing, like so: $('.showHide:visible') */ if ($('.showText').hasClass('hide')) { /* We use .text() and not .html() here. If you want to place inline html, instead use .html(). The browser will render .text() this as plain text. */ $('.showText').text("Less"); } else { $('.showText').text("More"); } /* Here, we use .toggleClass() two ways. If one class is specified, jQuery will remove and add the class accordingly. If two (or more!) classes are specified, jQuery will instead swap between the two (or more!) accordingly. */ $('.showText').toggleClass('hide'); $('.showColor').toggleClass('more less'); /* Using .toggle(), jQuery will hide or show the element. You can nest things in toggle as well, like a function to do other things too! */ $('.showHide').toggle(); }); 

 .more { color: green; } .less { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="toggle"> <div class="showText">Less</div> <a class="showColor less">Green=More, Red=Less</a> <br /> <div class="showHide">Stuff</div> </div> <a href="#" class="toggleLink">Test</a> 

The above example shows some usage of toggle() and toggleClass() , as well as replacing text in an element. I highly recommend reading over all the fun stuff you can do with jQuery at their api documentation , and recommend Code Academy to help get the basics for JavaScript and other languages.

Answer 2

You should use toggleClass , having only 1 span element, something like this:

<span class="toggleIcon icon-arrow-right2"></span>

$('.toggleIcon').toggleClass('icon-arrow-right2 icon-arrow-up2');