CODEWITHSUNDEEP
javascriptjqueryhtmlcss
JoshuaNa
JoshuaNa

Reputation: 23

jQuery toggle image not switching

I have created expandable links where the arrow changes when you expand the link. Expandable works great and the arrow keeps changing correctly when I expand the other link. It doesn't switch correctly if I expand the same link.

Here is a demo.

HTML

<ul class="side-expand">
  <li class="expandor">
    <a class="adobe" href="#" id="vid_link3">Adobe Digital Editions</a>
    <ul>
      <li>
        <a href="#" id="link22"><i class="icon-video"></i>
        Introduction</a>
      </li>
    </ul>
  </li>
  <li class="expandor">
    <a class="android" href="#" id="vid_link4">Android</a>
    <ul>
      <li>
        <a href="#" id="link29"><i class="icon-video"></i>
        Introduction</a>
      </li>
    </ul>
  </li>
</ul>

JAVASCRIPT

$('.expandor > a:first-child').click(function(e) {
  e.preventDefault();
  var $this = $(this).next('ul');
  $(".side-expand li ul").not($this).slideUp();
  $this.slideToggle();
  $('.side-expand > li').css('background-color', 'transparent');

  $('.side-expand > li').removeClass('dexpandor');

  var visibleUL = $('.side-expand li').find('ul').is(':visible');
  if (visibleUL) {
    $(this).parent('li').css('background-color', 'transparent', 'font-weight', 'normal').addClass('dexpandor');
  }
});

arrow not changing for the same toggle

Upvotes: 0

Views: 64

Answers (3)

Nvan
Nvan

Reputation: 1146

Add this to the click event, it toggle the class :

  $(this).parent('li').css('background-color','transparent', 'font-weight', 'normal').toggleClass('dexpandor','expandor');

Demo : jsfiddle

Upvotes: 0

rrk
rrk

Reputation: 15846

Add the class change code in slideToggle() callback. Because the ul is hidden only when slide is complete, which is when you need to remove the class.

DEMO

$('.expandor > a:first-child').click(function(e) {
  e.preventDefault();
  var $this = $(this).next('ul');
  $(".side-expand li ul").not($this).slideUp();
  $this.slideToggle(function() {
    $('.side-expand > li').css('background-color', 'transparent');
    $('.side-expand > li').removeClass('dexpandor');
    var visibleUL = $(this).closest('li').find('ul').is(':visible');
    if (visibleUL) {
      $(this).parent('li').css('background-color', 'transparent', 'font-weight', 'normal').addClass('dexpandor');
    }
  });
});
.side-expand li ul {
  display: none;
}

.expandor {
  background-image: url("https://odhelp.blob.core.windows.net/content/artifacts/img/right-arrow-small.png");
}

.expandor,
.dexpandor {
  background-color: transparent;
  background-position: right 13px;
  background-repeat: no-repeat;
}

.dexpandor {
  background-image: url("https://odhelp.blob.core.windows.net/content/artifacts/img/down-arrow-small.png");
}

.side-expand li a {
  font-size: 14px;
  font-weight: normal;
  padding-left: 70px;
}

.side-expand li a {
  background-size: 25px auto !important;
  border-bottom: 1px solid rgb(235, 235, 235);
  color: #000;
  display: block;
  font-size: 15px;
  padding: 5px 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="side-expand">
  <li class="expandor">
    <a id="vid_link3" value="6plk07k8op" href="#" class="adobe">Adobe Digital Editions</a>
    <ul>
      <li><a value="6plk07k8op" href="#" id="link22"><i class="icon-video"></i> Introduction</a></li>
      <li><a value="q1kogk5dc2" href="#" id="link23"><i class="icon-video"></i> Install</a></li>
      <li><a value="zmdge1whxu" href="#" id="link24"><i class="icon-video"></i> Authorize your computer</a></li>
      <li><a value="snl5pnvv27" href="#" id="link25"><i class="icon-video"></i> Read eBooks</a></li>
      <li><a value="8ldljcbtw0" href="#" id="link26"><i class="icon-video"></i> Return eBooks </a></li>
      <li><a value="tfrp7xjgus" href="#" id="link27"><i class="icon-video"></i> Transfer eBooks to reader </a></li>
      <li><a value="men1mw9an3" href="#" id="link28"><i class="icon-video"></i> Remove eBooks from reader</a></li>
    </ul>
  </li>
  <li class="expandor">
    <a id="vid_link4" value="ayfssj4211" href="#" class="android">Android</a>
    <ul>
      <li><a value="ayfssj4211" href="#" id="link29"><i class="icon-video"></i> Introduction </a></li>
      <li><a value="aqv1ieh6zd" href="#" id="link30"><i class="icon-video"></i> Install the OverDrive app</a> </li>
      <li><a value="ospa26ccnh" href="#" id="link37"><i class="icon-video"></i> Return and share titles</a></li>
    </ul>
  </li>
</ul>

Upvotes: 0

Michel Joanisse
Michel Joanisse

Reputation: 460

Replacing lines 8 through 13 with the following should toggle your arrow class properly:

$(this).parent().siblings().removeClass('dexpandor');
$(this).parent().toggleClass('dexpandor');

Upvotes: 1

Related Questions