سؤال

With Bootstrap I'm trying to toggle the class from a link when de accordion is open. Here is my code

<div class="mix category-2" data-myorder="1"> 
  <div class="row">
    <a  class="toggle" data-toggle="collapse" data-target="#collapsed1">
    <h3>Lorem ipsum dolor sit amet</h3>
    <div class="col-lg-2"><img src="images/logo.png" class="img-responsive"></div>
    <div class="col-lg-8">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.lorem</p></div>
    </a>
    <div class="col-lg-2">
      <ul class="fa-ul meta">
        <li><span class="glyphicon glyphicon-time"></span>Date</li>
        <li><span class="glyphicon glyphicon-tag"></span>Category</li>
        <li><span class="glyphicon glyphicon-user"></span>Auteur</li>
      </ul>
      <ul class="fa-ul linkto list-inline test-right">
        <li><a class="btn" href="#"><i class="fa fa-external-link "></i></a></li>
        <li><a class="btn" href="#"><i class="fa  fa-cloud-download "></i></a></li>
        <li><a class="btn toggle" data-toggle="collapse" data-target="#collapsed1"><i class="fa fa-chevron-down "></i></a></li>
      </ul>        
    </div>
  </div>
  <div class="row collapse" id="collapsed1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

I m trying to target .toggle link inside .linkto and toogle class to active state but the best result I had was a active state on all my link.

How can I target only the right link ? For now, here's how I get it :

$( "a.toggle" ).click(function() {
    $(".linkto a.toggle").toggleClass( "active" ); 
});
هل كانت مفيدة؟

المحلول

Ok, you want to click on the first 'a' and active the same duplicated in the 'ul' :

Bootply : http://www.bootply.com/134054

JS :

$( "a.toggle" ).click(function() {
  $(".linkto a.toggle[data-target=#collapsed1]").toggleClass( "active" ); 
});

or :

$(".linkto a.toggle[data-target="+$(this).attr('data-target')+"]").toggleClass( "active" ); 
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top