CODEWITHSUNDEEP
javascriptphpjquerytwitter-bootstrap
beefsupreme
beefsupreme

Reputation: 123

When trying to change chevron direction on click in JS, only 1 chevron changes.

I'm trying to change the direction of a chevron on a list-group to point inwards when clicked/activated. However with the code below I'm only getting the first chevron to change directions. I am looping the code for the items inside the menu (chevron included) so I need to find a way to have this functionality mirror across each item in the menu.

I realize this is most likely because the js is targeting an ID. However if I change the code to have directionToggle reflect a class...it changes all the arrows simultaneously.

How can I individually do this, given that I am using php to loop the behavior of each menu item?

<?php foreach ($tasks as $number => $name) { ?>
  <?php $is_heading = ends_with($name, ':'); ?>
    <?php if (!$is_heading): ?>
       <li class="list-group-item" tabindex="-1">
         <a class="listgroupwrap" href="#<?= $task_slugs[$number] ?>"></a>
         <span class="step-number-container"> <?= $number + 1 ?></span>
         <span class="btn-check">
            <i class="glyphicon glyphicon-ok"></i>
         </span>
         <span class="step-checkbox"></span>
         <span class="step-name content-blurred"><?= $name ?></span>
         <span class="step-show-hide">
           <span class="btn btn-showhide">
              <i class="glyphicon glyphicon-chevron-right" id="direction-toggle">
              </i>
           </span>
         </span>
       </li>
     <?php else: ?>
      <li class="list-group-item step-heading" tabindex="-1">
        <a class="listgroupwrap" href="#<?= $task_slugs[$number] ?>">
        </a>
        <span class="step-number-container"> <?= $number + 1 ?></span>
		<span class="step-name content-blurred"><?= $name ?>
        </span>
      </li>

      <?php endif ?>
<?php } ?>

var rightChevron = $('.glyphicon-chevron-right');
    var directionToggle = $('#direction-toggle');

    var fullscreenButton = $('.btn-showhide');
    fullscreenButton.click(function () {
        $('body').toggleClass('fullscreen');
        directionToggle.addClass('glyphicon-chevron-left');
        directionToggle.toggleClass('glyphicon-chevron-right');
    });

Upvotes: 0

Views: 693

Answers (2)

beefsupreme
beefsupreme

Reputation: 123

@cruiser 's solution worked pretty well, however I wasn't able to immediately change the arrow direction. I was only able to do so AFTER the sidebar was expanded to fullscreen.

This solution worked immediately for me.

$('.btn-showhide').click(function(){ $(this).find('i').toggleClass('glyphicon-arrow-right').toggleClass('glyphicon-arrow-left'); });

Upvotes: 0

Cruiser
Cruiser

Reputation: 1616

If you're trying to style more than one direction toggle, you need to make it a class. As ID, JQuery is only getting the first one. Once it's a class, use Jquery's .each() function:

$('.direction-toggle').each(function(){
    $(this).addClass(//class);
});

Inside your click event.

EDIT: Per the comments, it seems like you want to change the direction of 1 arrow at at time, whichever one is clicked. Here's what you'll want to do: 

$('.btn-showhide').click(function(){
    $(this).children().addClass(//class).
});

Upvotes: 1

Related Questions