Mohamed Mehanny Mohamed Mehanny - 3 months ago 17
Javascript Question

toggleClass select in loop jquery

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
@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 loop working all class "plus" changed to class "hideplus"
i need only clicked div take this class not all
i tried .next and closest method
it's worked with slideToggle but not worked with toggleClass

Answer

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>

Comments