'How can I create a Collapsible menu?

How can I create a Collapsible menu on "Cheat Status" and another on the "RainbowSixSiege Cheats". I'm good at structuring sites with html and css but I'm denied with javascript The complete code did not enter, I copied the main part, I hope there is everything you need If you need anything I can send you the complete file, however I only need the javascript code to make these two "Menus" work 

button {
  display: inline-block;
  border: none;
  background: none;
  cursor: pointer;
}
.product-status-box {
  background-color: #fff;
  box-shadow: 12px 12px 30px 0px rgba(0, 0, 0, 0.15);
  padding: 3.2rem 6.4rem;
  border-radius: 22px;
  margin-top: 3.2rem;
}

.product-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.product-status-title {
  font-size: 1.8rem;
  font-weight: 700;
}
.product-status-icon {
  width: 2.4rem;
}

.margin-top {
  margin-top: 1.6rem;
}

.hidden-box {
}

.hidden-box-btn {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.hidden-box-btn h3 {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.product-icon {
  width: 2rem;
}

.hidden-2nd-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.4rem;
  font-weight: 500;
}
 <div class="product-status-box">
          <button type="button" class="product-status">
            <h2 class="product-status-title">Cheats Status</h2>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="product-status-icon"
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
              stroke-width="2"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                d="M19 9l-7 7-7-7"
              />
            </svg>
          </button>
          <div class="hidden-box">
            <button type="button" class="hidden-box-btn margin-top">
              <h3>RainbowSixSiege Cheats</h3>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="product-icon"
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
                stroke-width="2"
              >
                <path
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  d="M19 9l-7 7-7-7"
                />
              </svg>
            </button>
            <div class="hidden-2nd-box">
              <p>Klar.gg</p>
              <p class="green-text">Operational</p>
            </div>
          </div>
       </div>
javascripthtmlcss


Solution 1:[1]

This is going to be tricky one I will suggest you to add jQuery UI and put these tags in your HTML head element

<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
 <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>

NOW add this jQuery code in your JavaScript and link it to your html just like you link external CSS in index.html

like this

<script src=" *your file path of JavaScript* "></script>

now add these line in your JavaScript file

    $(document).ready(function () {
    $('').click(function () {  //add your class or id in the click function
        $('').slideToggle(); //here you add class or id which you want to show when user click on button
    });
});

quotes in the above brackets are compulsory don't remove them place your class or id inside them

repeat this one with second button with different class or id.

Hope this will solve your problem.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions