toggleClass select in loop jquery

Question

I have a loop:

$(document).ready(function(){
    $(".viewonclick").click(function(){
        $(this).closest('.viewonclick').next(".hideonclick").slideToggle();       
        $(".plus").toggleClass("hideplus");
    });
});

.viewonclick i{
    position : absolute;
    right: 220px;
    display: inline;
}
.viewonclick .hideplus{
    display: none;
}

@foreach($customcat as $c)
<div>
    <div class="viewonclick"><h4>{{ $c->Custom->name }}
    <i class="plus icon"></i>
    <i class="minus icon"></i>
    </h4></div>
    <ul class="hideonclick">
      @foreach($customvalue as $v)
        <li>
          @if($v->custom_id == $c->custom_id)
           <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}">
            {{ $v->value }}
            </a>
          @endif
        </li>
      @endforeach 
    </ul>
</div>
@endforeach

When the loop works all elements having the class plus are changed to have hideplus instead. I only need the clicked element to take this class. I tried the .next() and .closest() method. It worked with .slideToggle() but not with .toggleClass().

Answer 1

This because you have this line:

$(".plus").toggleClass("hideplus");

and this line of code acts on all ".plus" elements.

Change this to:

$(this).find(".plus").toggleClass("hideplus");

An example:

$(function () {
  $('.plus.icon').toggleClass("hideplus");
  $(".viewonclick").click(function(){
    $(this).next(".hideonclick").slideToggle();
    $(this).find("i").toggleClass("hideplus");
  });
});

.viewonclick i{
  position : absolute;
  right: 220px;
  display: inline;
}
.viewonclick .hideplus{
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div>
    <div class="viewonclick"><h4>name1
        <i class="plus icon">+</i>&nbsp;
        <i class="minus icon">-</i>
    </h4></div>
    <ul class="hideonclick">
        <li>
            <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}">
                value1
            </a>
        </li>
        <li>
            <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}">
                value1
            </a>
        </li>
        <li>
            <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}">
                value1
            </a>
        </li>
    </ul>
</div>
<div>
    <div class="viewonclick"><h4>name2
        <i class="plus icon">+</i>&nbsp;
        <i class="minus icon">-</i>
    </h4></div>
    <ul class="hideonclick">
        <li>
            <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}">
                value1
            </a>
        </li>
        <li>
            <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}">
                value1
            </a>
        </li>
        <li>
            <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}">
                value1
            </a>
        </li>
    </ul>
</div>
<div>
    <div class="viewonclick"><h4>name3
        <i class="plus icon">+</i>&nbsp;
        <i class="minus icon">-</i>
    </h4></div>
    <ul class="hideonclick">
        <li>
            <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}">
                value1
            </a>
        </li>
        <li>
            <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}">
                value1
            </a>
        </li>
        <li>
            <a class="customcatvalue" data-customid="{{$c->custom_id}}" data-valueid="{{$v->id}}" data-section="{{ $section->id }}">
                value1
            </a>
        </li>
    </ul>
</div>