javascript - How to have a default tab open in this accordion and have it close the tab when another is opened? -


i'm not @ javascript , using basic code w3. i'm trying put accordion on website lists of services in categories , 1 tab expanded.

here current code: 

var acc = document.getelementsbyclassname("accordion");  var i;    (i = 0; < acc.length; i++) {    acc[i].onclick = function() {      this.classlist.toggle("active");      var panel = this.nextelementsibling;      if (panel.style.maxheight) {        panel.style.maxheight = null;      } else {        panel.style.maxheight = panel.scrollheight + "px";      }    }  }
/* style buttons used open , close accordion panel */    button.accordion {    background-color: #3bb7df;    color: #fff;    cursor: pointer;    padding: 0 20px;    line-height: 54px;    width: 100%;    text-align: left;    border: none;    outline: none;    transition: 0.4s;    font-size: 17px;    font-weight: 300;  }      /* add background color button if clicked on (add .active class js), , when move mouse on (hover) */    button.accordion.active,  button.accordion:hover {    background-color: #2894b7;  }    button.accordion:after {    content: '+';    font-size: 20px;    font-weight: 400;    color: #fff;    border: none;    float: right;    margin-left: 5px;    text-shadow: none;  }    button.accordion.active:after {    content: "–";  }      /* style accordion panel. note: hidden default */    div.panel {    padding: 0;    background-color: #f5f5f5;    border: none;    border-radius: 0px;    max-height: 0;    overflow: hidden;    transition: max-height 0.2s ease-out;  }    div.panel li {    list-style: none;    border-top: solid 1px #ddd;  }    div.panel li:hover {    background: #e0e0e0;  }    div.panel {    color: #1d1d1d;    font-size: 15px;    display: block;    padding: 12px 0;  }    div.panel i.fa-angle-right {    padding: 0 15px;  }
<button class="accordion">section 1</button>  <div class="panel">    <ul>      <li><a href="#"><i class="fa fa-angle-right"></i>link 1</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 2</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 3</a></li>    </ul>  </div>    <button class="accordion">section 2</button>  <div class="panel">    <ul>      <li><a href="#"><i class="fa fa-angle-right"></i>link 1</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 2</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 3</a></li>    </ul>  </div>    <button class="accordion">section 3</button>  <div class="panel">    <ul>      <li><a href="#"><i class="fa fa-angle-right"></i>link 1</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 2</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 3</a></li>    </ul>  </div>

all of default code , found on w3 site accordion.

i want first tab open default, , if tab opened, close other open tab.

thanks.

opening first tab default

to open first tab (or other) default, invoke click() method on desired accordion index. can done @ end of javascript:

acc[0].click(); // <-- invoke onclick first tab.

always keep 1 tab expanded

to keep 1 accordion tab open @ times, radio button style, you'll need save reference last clicked accordion item, perform logic close before opening new accordion menu.

see below working example.

complete example

i've cleaned code bit moving operations seperate functions, , including opening first tab default , always keep 1 tab expanded changes.

there alwaysoneopen variable on line 4 of js can toggle change behavior. true, stops having tabs closed. if change false, you'll able close tab clicking on it.

var acc = document.getelementsbyclassname("accordion");  var i;  var last;  var alwaysoneopen = true;    (i = 0; < acc.length; i++) {    acc[i].onclick = function() {      // if same accordion clicked, toggle      if (last === && !alwaysoneopen) {        toggleaccordion(last);      } else {        // if accordion open, close        if (last) {          closeaccordion(last);        }        // open clicked accordion        last = this;        openaccordion(last);      }    };  }    var closeaccordion = function(acc) {    acc.classlist.remove("active");    var panel = acc.nextelementsibling;      panel.classlist.remove("active");    panel.style.maxheight = null;  }    var openaccordion = function(acc) {    acc.classlist.add("active");    var panel = acc.nextelementsibling;      panel.classlist.add("active");    panel.style.maxheight = panel.scrollheight + "px";  }    var toggleaccordion = function(acc) {    last.classlist.toggle("active");    var panel = last.nextelementsibling;    panel.classlist.toggle("active");    if (panel.style.maxheight) {      panel.style.maxheight = null;    } else {      panel.style.maxheight = panel.scrollheight + "px";    }  };    last = acc[0];  toggleaccordion(last);
/* style buttons used open , close accordion panel */    button.accordion {    background-color: #3bb7df;    color: #fff;    cursor: pointer;    padding: 0 20px;    line-height: 54px;    width: 100%;    text-align: left;    border: none;    outline: none;    transition: 0.4s;    font-size: 17px;    font-weight: 300;  }      /* add background color button if clicked on (add .active class js), , when move mouse on (hover) */    button.accordion.active,  button.accordion:hover {    background-color: #2894b7;  }    button.accordion:after {    content: '+';    font-size: 20px;    font-weight: 400;    color: #fff;    border: none;    float: right;    margin-left: 5px;    text-shadow: none;  }    button.accordion.active:after {    content: "–";  }      /* style accordion panel. note: hidden default */    div.panel {    padding: 0;    background-color: #f5f5f5;    border: none;    border-radius: 0px;    max-height: 0;    overflow: hidden;    transition: max-height 0.2s ease-out;  }    div.panel li {    list-style: none;    border-top: solid 1px #ddd;  }    div.panel li:hover {    background: #e0e0e0;  }    div.panel {    color: #1d1d1d;    font-size: 15px;    display: block;    padding: 12px 0;  }    div.panel i.fa-angle-right {    padding: 0 15px;  }
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <button class="accordion">section 1</button>  <div class="panel">    <ul>      <li><a href="#"><i class="fa fa-angle-right"></i>link 1</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 2</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 3</a></li>    </ul>  </div>    <button class="accordion">section 2</button>  <div class="panel">    <ul>      <li><a href="#"><i class="fa fa-angle-right"></i>link 1</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 2</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 3</a></li>    </ul>  </div>    <button class="accordion">section 3</button>  <div class="panel">    <ul>      <li><a href="#"><i class="fa fa-angle-right"></i>link 1</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 2</a></li>      <li><a href="#"><i class="fa fa-angle-right"></i>link 3</a></li>    </ul>  </div>


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more