Question

Ey, I found some code that would make my open accordion close when I select another accordion. But it just bugs hard(hiding the accordions I click OR with other code it just slides the accordions together.). And when the page opens I want the first accordion to be opened automatically so I did that with "checked" if there is a better way to do this I'm open for some suggestions. :D

HTML:

<div class="accordion-bral">

 <div>  <!-- accordion item 1 -- start -->
   <input class="ac-input" id="ac-1" name="accordion-1" type="checkbox" checked/>
   <label class="ac-label" for="ac-1">HTML and CSS only<i></i></label>
   <div class="article ac-content">
   </div>
 </div>
 <!-- accordion item 1 -- end -->

 <div> <!-- accordion item 2 -- start -->
   <input class="ac-input" id="ac-2" name="accordion-1" type="checkbox" />
   <label class="ac-label" for="ac-2">responsive accordion<i></i></label>
   <div class="article ac-content">
   </div>
 </div>
 <!-- accordion item 2 -- end -->

 <div>  <!-- accordion item 3 -- start -->
   <input class="ac-input" id="ac-3" name="accordion-1" type="checkbox" />
   <label class="ac-label" for="ac-3">Divs to divide your things up<i></i></label>
   <div class="article ac-content">

   </div>
 </div>
 <!-- accordion item 3 -- end -->

 <div>  <!-- accordion item 4 -- start -->
   <input class="ac-input" id="ac-4" name="accordion-1" type="checkbox" />
   <label class="ac-label" for="ac-4">Forms are cool<i></i></label>
   <div class="article ac-content">
   </div>
 </div>

</div>

Jquery:

$(document).ready(function($) {
  $('.accordion-bral').find('.ac-input').click(function(){

    //Expand or collapse this panel
    $(this).next().slideToggle('fast');

    //Hide the other panels
    $(".accordion-content").not($(this).next()).slideUp('fast');

  });
});

Hope someone knows what is wrong with the code that makes it bug.

Answer 1

我很困惑……您是不是试图创建类似的东西？

$(document).ready(function($) {
  $('.accordion').accordion();
});

* {
  margin: 0;
  padding: 0;
}

h1 {
  padding: 5px;
  margin-top: 5px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

h1:not(.ui-state-active) {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

div {
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.accordion {
  background-color: black;
  width: 500px;
  padding: 50px;
  color: white;
  border-radius: 10px;
}

.accordion>div,
.accordion>h1 {
  background-color: gray;
}

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<div class="accordion">
  <h1>Title 1</h1>
  <div>
    <p>
      This is text to title 1 This is text to title 1 This is text to title 1 This is text to title 1 This is text to title 1 This is text to title 1 This is text to title 1
    </p>
  </div>
  <h1>Title 2</h1>
  <div>
    <p>
      This is text to title 2 This is text to title 2 This is text to title 2 This is text to title 2 This is text to title 2 This is text to title 2 This is text to title 2 This is text to title 2
    </p>
  </div>
  <h1>Title 3</h1>
  <div>
    <p>
      This is text to title 3 This is text to title 3 This is text to title 3 This is text to title 3 This is text to title 3 This is text to title 3 This is text to title 3 This is text to title 3
    </p>
  </div>
  <h1>Title 4</h1>
  <div>
    <p>
      This is text to title 4 This is text to title 4 This is text to title 4 This is text to title 4 This is text to title 4 This is text to title 4
    </p>
  </div>
</div>

如果是，那就太好了：D我的代码段根本没有优化（切换项目时的圆角）。有关更详细和美观的信息，请查看reference。

注意：：这确实要求您包括JQueryUi。

How to hide accordion on click

1 个答案: