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?
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>