0

At the moment when the icon (inside a class) is clicked all the same icons change.

I have tried using $(this). thats been suggested in other questions, but no dice.

<p>Elaine Thompson   <i class="material-icons add box">add_box

    </i></p>

    <span class='hideinfo'>
        <ul>

            <li><a href='mailto:example@example.co.uk'>example@example.co.uk</a></li><li>01224 732764</li><li>07739 745612</li>
                </ul>
                    </span>



<script>


$(document).ready(function() {

// Hide the "view" div.
$('span.hideinfo').hide();


$('i.add').on('click',function() {
  var icon = $('.box');
  icon.toggleClass('add');
  if (icon.hasClass('add') ) {
    icon.text('add_box');
    $('span.hideinfo').hide();

  } else {
    icon.text('indeterminate_check_box');
   $(this).next().slideToggle("slow");
    return false;

  }
});

});
</script>

It should only the icon change when its active. Then it changes indeterminate_check_box to reveal the information of the person and then click on it again so it changes back to add_box and hide the information. Any hints?

LvO92
  • 39
  • 1
  • 8
  • Like you found in other questions, you should use `var icon = $(this)` in place of `var icon = $('.box')` https://jsfiddle.net/1gn3jh0c/. The former will select ONLY the `` element that was clicked, whereas the latter will select all elements with a class of `box`. Also, I don't know what you're doing with the `"view" div`, as there's no HTML included for it - is there a `span.hideinfo` element after each `` tag? Perhaps more HTML and a little clarification would help get to the root of your issue? –  Oct 18 '19 at 16:08
  • Thanks for your comment. Does this clarify things bit better? – LvO92 Oct 18 '19 at 16:17
  • Yes, it does. Check this edit out https://jsfiddle.net/5p3mu1db/ –  Oct 18 '19 at 16:23

1 Answers1

0

You do want to use $(this) to just work with the individual <i> element that was clicked, along with that, though, using $(this).next().slideToggle() won't toggle anything, since the <i> is embedded in the <p> (it would try selecting the next sibling within the <p> element, which there aren't any), instead you want to select the parent <p> element first (I used .parent(), but you could do .closest('p') or something instead), then select the next element and slideToggle it.

<script>
  $('.hideinfo').hide();

  $('i.add').click(function() {
    $(this).toggleClass('add').text(
      $(this).hasClass('add') ? 'add_box' : 'indeterminate_check_box'
    ).parent().next().slideToggle();
  });
</script>

https://jsfiddle.net/5p3mu1db/