CODEWITHSUNDEEP
javascriptjquery
Justin B
Justin B

Reputation: 57

Click event toggling all classes rather than correct block

I have some collapsed/collapsible blocks whereby the first block is open and second/third closed. They work the way I want in terms of opening and closing, but I can't get my head around how to alter the function so that the plus and minus icons change for the correct block. At the moment all change at the same time no matter which block I open or close.

How I can alter the function so that the toggled block updates the correct icon?

function toggleDiv(divId) {
$("#"+divId).toggle();
$('.product-toggle span.icon').toggleClass('icon-plus icon-minus')
}

HTML

<p><a href="javascript:toggleDiv('features');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Features</span></a></p>
<div id="features">
    Features 
</div>

<p><a href="javascript:toggleDiv('specifications');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">Specifications</span></a></p>
<div id="specifications">
    Spec 
</div>

<p><a href="javascript:toggleDiv('faq');" class="product-toggle"><span class="icon icon-plus" aria-hidden="true"></span><span class="toggle-title">FAQ</span></a></p>
<div id="faq">
    FAQ 
</div>

Upvotes: 0

Views: 123

Answers (4)

dreamweiver
dreamweiver

Reputation: 6002

Try this 

   function toggleDiv(divId) {
      var idSelector = "#"+divId;
      $(idSelector).toggle();  
      $('p').has('idSelector').closest('span.icon').toggleClass('icon-plus icon-minus');
   }

Upvotes: 0

Patsy Issa
Patsy Issa

Reputation: 11293

Let me start off by saying no... just no!

Add the target in your markup as a data attribute: 

<div class="product-toggle" data-target="features">
  <p>
    <span class="icon icon-plus" aria-hidden="true"></span>
    <span class="toggle-title">Features</span>
  </p>
</div>
<div id="features">
    Features 
</div>

Attach a listener to the product-toggle class like so:

$(document).on('click', '.product-toggle', function() {
  var target = this.dataset.target;
  $('#'+target).toggle();
  $(this).find('span.icon').toggleClass('icon-plus icon-minus');
});

JsFiddle

Upvotes: 1

That White Eyebrow Guy
That White Eyebrow Guy

Reputation: 569

Here is something I came up with which is a more handy solution and is not using javascript in href.

$('.product-toggle').on('click', function(evt){
    // This will be set to the context of the current element
    $("#"+this.name).toggle();
    $(this).find('.icon').toggleClass('icon-plus icon-minus');
});

This requires that you give the a tags a name instead of calling the function directly. Here is a link to the fiddle: http://jsfiddle.net/ttpfzrgL/

Upvotes: 0

Shaunak D
Shaunak D

Reputation: 20636

Note : Inline events are discouraged; you should use jQuery click handlers as you're already using jQuery.

For example (Demo): 

$('a.product-toggle').click(function(e){
    $(this).closest('p').next('div').toggle();
    $(this).find('span.icon').toggleClass('icon-plus icon-minus')
})

If you need to use inline event calls,

You need to alter the second line to get the icon for current element

function toggleDiv(divId) {
    $("#"+divId).toggle();
    $("#"+divId).prev('p').find('.product-toggle span.icon').toggleClass('icon-plus icon-minus')
}

because,

$('.product-toggle span.icon')

selects all the <div>s

or pass this with the click event.

<p><a href="javascript:toggleDiv('features',this);"...

and

function toggleDiv(divId,currEl) {
    $("#"+divId).toggle();
    $(currEl).find('span.icon').toggleClass('icon-plus icon-minus')
}

Upvotes: 0

Related Questions