Only open items when entering from the accordion menu

Asked 1 years ago, Updated 1 years ago, 36 views

I set the menu to open and close in the accordion menu, but I left only the items I entered open and
How do I keep the other menus closed?

http://www.dataplan.jp/blog/css/3127
I'd like to use this site as a reference.

<divid="accordion" class="accordionbox">
    <dl class="accordionlist">
        <dt class="clearfix">
            <div class="title">
                <p>+, - Switch </p>
            </div>
            <p class="accordion_icon"><span>/span><span>>
        </dt>
        <dd>+, - Switch </dd>
        <dt class="clearfix">
            <div class="title">
                <p>+, - Switch </p>
            </div>
            <p class="accordion_icon"><span>/span><span>>
        </dt>
        <dd>+, - Switch </dd>
    </dl>
</div>

JS

$(function(){
    $(".accordionbox dt").on("click", function(){
        $(this).next().slideToggle();   
        // If active is present
        if($(this).children(".according_icon").hasClass('active')}{           
            // Remove active
            $(this).children(".according_icon").removeClass('active');              
        }
        else{
            // Add active
            $(this).children(".accordion_icon").addClass('active');         
        }           
    });
});

CSS

.accordionbox{
    width: 50%;
    background:#FBDBC4;
    margin —10px auto40px;
    padding —20px;
}
.accordionlist dt{
    display:block;
    background: #ffff;
    padding —20px0 10px5px;
    border-top —1px solid#DFDFDF;
}
.accordionlist dt:first-child {
    border-top: none!important;
}
.accordionlist dt.title{
    padding-left —10px;
    float:left;
}
.accordionlistdd{
    display: none;
    background: #ffff;
    padding —00 20px15px;
}
.accordion_icon,
.accordion_iconspan{
    display:inline-block;
    transition —all.4s;
    box-sizing: border-box;
}
.accordion_icon{
    position:relative;
    width: 30px;
    height: 30px;
    float:right;
    margin-right —5px;
}
.accordion_iconspan{
    position:absolute;
    left —6px;
    width: 50%;
    height —2px;
    background-color:#F88789;
    border-radius:4px;
    - webkit-border-radius:4px;
    -ms-border-radius:4px;
    -moz-border-radius:4px;
    -o-border-radius:4px;
}
.accordion_iconspan:nth-of-type(1){
    top —5px;
    transform —rotate (0 deg);
    - webkit-transform:rotate (0 deg);
    -moz-transform:rotate (0 deg);
    -ms-transform:rotate (0 deg);
    -o-transform:rotate (0 deg);
}
.accordion_iconspan:nth-of-type(2){
    top —5px;
    transform —rotate (90 deg);
    - webkit-transform:rotate (90 deg);
    -moz-transform:rotate (90 deg);
    -ms-transform:rotate (90 deg);
    -o-transform:rotate (90 deg);
}
/*+, -Switch*/
.accordion_icon.active span:nth-of-type(1){
    display: none;
}
.accordion_icon.active span:nth-of-type(2){
    top —5px;
    transform —rotate (180 deg);
    - webkit-transform:rotate (180 deg);
    -moz-transform:rotate (180 deg);
    -ms-transform:rotate (180 deg);
    -o-transform:rotate (180 deg);
}
<dd>+, -Switch </dd>


in the dd-enclosed area. Checkbox has been checked here or
If you have already entered it on the input screen,
So how do I make it open?

javascript html css

2022-09-30 11:44

1 Answers

I think you can filter the menu items according to the conditions you want them to be open and do the same thing as the display control when you click them.

The following is an example implementation:

$(function(){
  // initial open-close state setting
  $(".accordionbox dt")
    .filter((i,e)=>isActive($(e).next()))
    .each(i,e)=>toggle($(e)));

  $(".accordionbox dt").on("click", function(){
    toggle($(this));
  });
});

function toggle($dt){
  $dt.next().slideToggle();
  // If active is present
  if($dt.children(".accordion_icon").hasClass('active')}{
    // Remove active
    $dt.children(".accordion_icon").removeClass('active');
  } else{
    // Add active
    $dt.children(".accordion_icon").addClass('active');
  }
}

// determination of initial open/close conditions
function isActive($dd){
  // Are certain radio buttons checked?
  if($dd.find('input[type="radio"].close:checked').length)
    return false;
  // Are you checking the check box?
  if($dd.find('input[type="checkbox"]:checked').length)
    return true;
  // Does the text box contain input?
  if($dd.find('input[type="text"]').filter(i,e)=>$(e).val()) .length)
    return true;
  return false;
}
.clearfix:after{
  content: ";
  display:block;
  clear —both;
}

.accordionbox{
  width: 50%;
  background:#FBDBC4;
  margin —10px auto40px;
  padding —20px;
}

.accordionlist dt{
  display:block;
  background: #ffff;
  padding —20px0 10px5px;
  border-top —1px solid#DFDFDF;
}

.accordionlist dt:first-child {
  border-top: none!important;
}

.accordionlist dt.title{
  padding-left —10px;
  float:left;
}

.accordionlistdd{
  display: none;
  background: #ffff;
  padding —00 20px15px;
}

.accordion_icon,
.accordion_iconspan{
  display:inline-block;
  transition —all.4s;
  box-sizing: border-box;
}

.accordion_icon{
  position:relative;
  width: 30px;
  height: 30px;
  float:right;
  margin-right —5px;
}

.accordion_iconspan{
  position:absolute;
  left —6px;
  width: 50%;
  height —2px;
  background-color:#F88789;
  border-radius:4px;
  - webkit-border-radius:4px;
  -ms-border-radius:4px;
  -moz-border-radius:4px;
  -o-border-radius:4px;
}

.accordion_iconspan:nth-of-type(1){
  top —5px;
  transform —rotate (0 deg);
  - webkit-transform:rotate (0 deg);
  -moz-transform:rotate (0 deg);
  -ms-transform:rotate (0 deg);
  -o-transform:rotate (0 deg);
}

.accordion_iconspan:nth-of-type(2){
  top —5px;
  transform —rotate (90 deg);
  - webkit-transform:rotate (90 deg);
  -moz-transform:rotate (90 deg);
  -ms-transform:rotate (90 deg);
  -o-transform:rotate (90 deg);
}


/*+, -Switch*/

.accordion_icon.active span:nth-of-type(1){
  display: none;
}

.accordion_icon.active span:nth-of-type(2){
  top —5px;
  transform —rotate (180 deg);
  - webkit-transform:rotate (180 deg);
  -moz-transform:rotate (180 deg);
  -ms-transform:rotate (180 deg);
  -o-transform:rotate (180 deg);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<divid="accordion" class="accordionbox">
  <dl class="accordionlist">
    <dt class="clearfix">
      <div class="title">
        <p>Checked </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="checkbox" checked="checked"/>/dd>
    <dt class="clearfix">
      <div class="title">
        <p>Unchecked </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="checkbox"/></dd>
    <dt class="clearfix">
      <div class="title">
        <p> Entered </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="text" value="hoge"/></dd>
    <dt class="clearfix">
      <div class="title">
        <p>Unentered </p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="text"/></dd>
    <dt class="clearfix">
      <div class="title">
        <p> Specific radio button checked</p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="radio" class="close" checked="checked"/><input type="text" value="hoge"/>/dd>;
    <dt class="clearfix">
      <div class="title">
        <p> Not checked for certain radio buttons</p>
      </div>
      <p class="accordion_icon"><span>/span><span>>
    </dt>
    <dd><input type="radio" class="close"/><input type="text" value="hoge"/></dd>
  </dl>
</div>


2022-09-30 11:44

If you have any answers or tips


© 2024 OneMinuteCode. All rights reserved.