展开和关闭手风琴引导程序

Question

Hello i am struggle with something in accordeons here is my code and illuminate me please guys!!

    <div id="tg-accordion" class="tg-accordion">
   <div class="tg-panel">
      <h4 class="active">Why is accreditation important</h4>
      <div class="tg-panelcontent" style="display: block;">
         <div class="tg-jobdescription">
            <div class="tg-description">
              <p>description</p>
            </div>
         </div>
      </div>
   </div>
   <div class="tg-panel">
      <h4 style="margin-bottom: 10px!important;">European Regulation 765/ 2008</h4>
      <div class="tg-panelcontent" style="display: none;">
         <div class="tg-jobdescription">
            <div class="tg-description" style="margin-bottom: 10px!important;">
               <p>description</p>
         </div>
      </div>
   </div>
   <div class="tg-panel">
      <h4>Recognition of certifications. How accreditation provides recognition</h4>
      <div class="tg-panelcontent" style="display: none;">
         <div class="tg-jobdescription">
            <div class="tg-description">
              <p>description</p>
            </div>
         </div>
      </div>
   </div> 

This is html and i have some jquery i want when i click second time to close that accordeon tab and when it`s open to have on tg-panel background blue. And here is my Jquery:

        $(function() {
            $('.tg-panelcontent').hide();
            // $('#tg-accordion h4:first').addClass('active').next().slideDown('slow');
            $('#tg-accordion h4').click(function() {
                if($(this).next().is(':hidden')) {
                    $('#tg-accordion h4').removeClass('active').next().slideUp('slow');
                    $(this).toggleClass('active').next().slideDown('slow');
                }
            });
        }); 

Answer 1

If you've already included Bootstrap's scripts, there are no need for additional scripts in order to do the behaviour you want. Check out this example, which is available at Bootstrap's official page .

With this, the data-toggle attribute at the <a> or <button> tags indicates that the element it's a "collapse toggler" and the href/data-target points to an element ID which is the container to be collapsed/expanded. Simple :)

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  </div>
</div>

Answer 2

You don't need anything. Only be sure that the link to CSS is on the top of the page and the Scripts and the end of the page. It should work fine.

 <!-- CSS needed at the beginning of the page --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <div class="accordion" id="accordionExample"> <div class="card"> <div class="card-header" id="headingOne"> <h5 class="mb-0"> <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Why is accreditation important </button> </h5> </div> <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample"> <div class="card-body"> description </div> </div> </div> <div class="card"> <div class="card-header" id="headingTwo"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> European Regulation 765/ 2008 </button> </h5> </div> <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample"> <div class="card-body"> description </div> </div> </div> <div class="card"> <div class="card-header" id="headingThree"> <h5 class="mb-0"> <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Recognition of certifications. How accreditation provides recognition </button> </h5> </div> <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample"> <div class="card-body"> description </div> </div> </div> </div> <!-- Scripts needed at the end of the page --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 

Answer 3

You can simple add the data-toggle="collapse" on the header's together with the data-target="#idOfYourElement" to trigger the collapse. And replace the display:none with the collapse class on the target element:

Working exemple:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <div id="tg-accordion" class="tg-accordion"> <div class="tg-panel"> <h4 class="active" data-toggle="collapse" data-target="#targetOne">Why is accreditation important</h4> <div class="tg-panelcontent collapse" id="targetOne"> <div class="tg-jobdescription"> <div class="tg-description"> <p>description</p> </div> </div> </div> </div> <div class="tg-panel"> <h4 data-toggle="collapse" data-target="#targetTwo" style="margin-bottom: 10px!important;" >European Regulation 765/ 2008</h4> <div class="tg-panelcontent collapse" id="targetTwo"> <div class="tg-jobdescription"> <div class="tg-description" style="margin-bottom: 10px!important;"> <p>description</p> </div> </div> </div> <div class="tg-panel"> <h4 data-toggle="collapse" data-target="#targetThree">Recognition of certifications. How accreditation provides recognition</h4> <div class="tg-panelcontent collapse" id="targetThree"> <div class="tg-jobdescription"> <div class="tg-description"> <p>description</p> </div> </div> </div> </div>