bootstrap practice

by ShaCP

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<div class="tab-accordion" id="tabAccordion">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="homeTab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="profileTab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
    </li>
    <li class="nav-item" role="presentation">
      <button class="nav-link " id="contactTab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
    </li>
  </ul>
  <div class="accordion tab-content" id="myTabContent">

    <div class="accordion-item tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="homeTab">
      <h2 class="accordion-header" id="homeHeading">
        <button class="accordion-button btn--block" type="button" data-bs-toggle="collapse" data-bs-target="#homeCollapse" data-bs-parent="#tabAccordion" aria-expanded="false" aria-controls="home-collapse">
          Home
        </button>
      </h2>
      <div class="accordion-collapse collapse show" data-bs-parent="#tabAccordion" id="homeCollapse">
        <div class="accordion-body">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in antes viverra, rutrum erat rutrum, consectetur mi. Proin at maximus est. Nullam purus ex, iaculis sed erat sed, blandit tincidunt quam. Cras scelerisque id quam sed dignissim Pellentesque urna nunc, gravida quis hendrerit ac, tristique ut quam. Vivamus suscipit dignissim tortor nec...

CSS

.btn--block {
  width: 100%;
/*   border-radius: 0; */
  /* outline: 1px inset white; */
/*   border: 1px solid white;
  background-color: white;
  color: black; */
}

.tab-accordion {
  padding: 10px;
}



.tab-pane .accordion-button {
  display: none;
}

@media screen and (min-width: 701px) {
  .tab-pane .collapse {
    display: block;
  }
}

@media screen and (max-width: 700px) {
  .tab-pane .accordion-button {
    display: flex;
  }

  .tab-content>.tab-pane {
    display: block;
    opacity: 1;
  }

  .nav-tabs {
    display: none;
  }
}

/* @media screen and (min-width: 701px) {
  .tab-content>.tab-pane {
    display: block;
    opacity: 1;
  } 
}*/

JavaScript

var tabs = [...document.querySelectorAll('#myTab button')];
var accordionBtns = [...document.querySelectorAll('#myTabContent button')];
var collapsibles = [...document.querySelectorAll('#myTabContent .collapse')];

tabs.forEach(function(tab, i) {
debugger;
  var accordionTrigger = new bootstrap.Collapse(collapsibles[i], {
    toggle: false
  });
/*   tab.addEventListener('click', function(e) {
    e.preventDefault();
    accordionTrigger.show();
  }) */
})

accordionBtns.forEach(function(btn, i) {
  var tabTrigger = new bootstrap.Tab(tabs[i]);
/*   btn.addEventListener('click', function(e) {
    e.preventDefault();
    tabTrigger.show();
  }) */
})