For Super Hooper - toggle - multiple - switch text - if else V3

by ian_smithz

HTML

<div class="row">

    <p class="right">
      <a class="toggler expanded" data-toggle="box1">
        <span class="toggler-text">Hide details</span>
        <span class="icon icon-up-dir">UP</span>
        <span class="icon icon-down-dir">DOWN</span>
      </a>
    </p>

    <div id="box1" class="">This is box 1</div>

</div>

<div class="row">

    <p class="right">
      <a class="toggler" data-toggle="box2">
        <span class="toggler-text">Show details</span>
        <span class="icon icon-up-dir">UP</span>
        <span class="icon icon-down-dir">DOWN</span>
      </a>
    </p>

    <div id="box2" class="hide">This is box 2</div>

</div>

CSS

div {
  padding: 1em;
  border: 1px solid black;
  border-radius: 3px;
  margin: 1em;
}

.hide {
  display : none;
}

.toggler {
   font-size: 13px;
   position: relative;
}

.toggler .icon-up-dir {
    position: absolute;
    right: -22px;
    top: -2px;
    display: none
}

.toggler .icon-down-dir {
    position: absolute;
    right: -22px;
    top: 0
}

.toggler.expanded .icon-up-dir {
    display: inline-block
}

.toggler.expanded .icon-down-dir {
    display: none
}

JavaScript

$(function() {

    $('.toggler').click(function(e) {

        var f = this,
            d = $(f),
            g = d.data("toggle");

        d.toggleClass("expanded");

        $("#" + g).slideToggle("fast", function (){

            if ($(this).css('display') == 'none') {
      
                $(this).closest('.row').find('.toggler-text').html('Show Details');

            } else {

                $(this).closest('.row').find('.toggler-text').html('Hide Details');

            }

        });

    });
  
});