CODEWITHSUNDEEP
jqueryaccordionjquery-ui-accordion
Pete Smith
Pete Smith

Reputation: 23

jQuery Accordion does not close

The accordion tab does not close if I click on the span inside the accordion navigation. What does I have missed? 

$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .second-title').removeClass('active');
        $('.accordion .radio-toolbar').slideUp(300).removeClass('open');
}
 
    $('.second-title').click(function(e) {
        var currentAttrValue = $(this).attr('href');
 
        if($(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();
 
            $(this).addClass('active');
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }
 
        e.preventDefault();
    });
});
.radio-toolbar {
  width: 100%;
  height: 100%;
  float: left;
  background: #444; 
  -webkit-box-shadow: inset 0px 12px 7px -10px rgba(0,0,0,1);
  -moz-box-shadow: inset 0px 12px 7px -10px rgba(0,0,0,1);
  box-shadow: inset 0px 12px 7px -10px rgba(0,0,0,1);
  display:none;
  padding-bottom: 20px;
}

.accordion {
  float: left;
  width: 100%;
  border-bottom: 1px solid #f2f2f2;
}
.second-title {
  font-weight: 400;
  color: #444;
  float: left;
  width: 100%;
  height: 100%;
  display: block;
  padding: 24px;
  box-sizing: border-box;
  line-height: 20px;
  background: #fff;
  border-top: 1px solid #f2f2f2;
}

.strong  {
  font-weight: 600;
}   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">

    
    
    
<a class="second-title" href="#getlogo">
<span class="strong">Logoanbringung</span>
</a>                      
         
<div class="radio-toolbar" id="getlogo">
</div>

    
    

<a class="second-title" href="#getmechanik">
<span class="strong">2-Ring Combimechanik</span>
</a>  
  
<div class="radio-toolbar" id="getmechanik">  
</div>


  
</div>

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam

Upvotes: 1

Views: 118

Answers (1)

JuaRoAl
JuaRoAl

Reputation: 201

Use $(this) instead of e.target

$(document).ready(function(e) {
    function close_accordion_section() {
        $('.accordion .second-title').removeClass('active');
        $('.accordion .swatch, .accordion .radio-toolbar').slideUp(300).removeClass('open');
}

    $('.second-title').click(function() {
        var currentAttrValue = $(this).attr('href');

        if($(this).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            $(this).addClass('active');
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
});

Upvotes: 0

Related Questions