What is the best way to implement a collapsible menu on a website?

Is there a way to implement collapsible menus for "Cheat Status" and "RainbowSixSiege Cheats" without using JavaScript? My HTML and CSS skills are strong, but I struggle with Javascript. Below is the main part of the code, let me know if you need the full file or just the Javascript portion to make these two menus functional. 

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

Answer №1

If you're facing a challenge, consider incorporating jQuery UI by including these tags within the head element of your HTML:

<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>

Next, integrate this jQuery code into your JavaScript file and link it to your HTML file similar to how external CSS is linked in index.html:

like this

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

Then include these lines in your JavaScript file:

    $(document).ready(function () {
    $('').click(function () {  //Specify your desired class or id within the click function
        $('').slideToggle(); //Add the class or id that should be toggled when the button is clicked
    });
});

Ensure to retain the quotes in the brackets above and insert your class or id within them.

Repeat the process with a second button using a different class or id.

Hopefully, this guidance will assist you in resolving your issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding Rows to a DataTables Table

I am currently working on dynamically adding <tr/> tags to a DataTable, but I am struggling to find detailed documentation on how the process of "adding TR" is meant to be executed. Below is the setup of my DataTable: $("#Grid").DataTable({ state ...

javascriptjqueryajaxdatatables

Incorporating server-side rendered components into a Vue.js parent component

I have a server-side rendered page that includes information about "orders" and a root Vue object initialized as the "parent object." Is it feasible to assign the rendered HTML orders as children of that parent Vue object? Vue.js is known for its dynamic ...

javascripthtmlvue.jsserver-side-rendering

Pictures will be displayed briefly for 1 second prior to the initiation of the JavaScript animation

I recently built a website using gatsby.js and incorporated bounce.js to animate some images on the page. Bounce.js is a JavaScript library that offers DOM animation functionalities. Although everything appears fine when I view the site locally, once I de ...

javascriptreactjsanimationreact-reduxgatsby

When the input CTRL+C is entered in the console, Node.js / JavaScript will output

I have a script that I use to restart another script. Here is the code snippet: catch(err){ console.log(err) webhook.send(`Error monitoring **www.-.com**, restarting monitor.`) await browser.close() await sleep(monitorDelay) return chec ...

javascriptnode.jspuppeteercheerio

Error: Browserify jQuery Plugin Not Working

Having trouble browserifying a jQuery plugin and keep seeing this error in the browsers console: Uncaught Error: Cannot find module 'jquery' Here's how I have my package.json set up: "browserify": { "transform": [ "browserify-shim" ...

javascriptjqueryjquery-pluginsbrowserifybrowserify-shim

Enhance Your Forms with Bootstrap 4 Input Extension

I've been struggling to create a form with Bootstrap 4, specifically setting the value in an input text client-side for a modal form. No matter what I try, it just doesn't seem to work... Here is the form: $('#contact-modal').on(& ...

javascripthtmlcssformsbootstrap-4

Animation will cease once the page is refreshed via Ajax

I'm facing a challenge with a problem that I can't seem to resolve. The issue lies in my use of this plugin for displaying random images. The only step left is to refresh the content within the div. However, every time I attempt to do so, the an ...

jqueryhtmlajax

The margin-bottom CSS class is integrated within Twitter Bootstrap

Is there a standard margin bottom class that can be used? I attempted to use bottom5 like this: <div class="col-lg-2 bottom5"></div> However, it did not have the desired effect. ...

csstwitter-bootstraptwitter-bootstrap-3

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Working with angular datatables, I have the following code: beforeSend:</p> success callback causes the table on the page not to populate with the data. How can I implement a callback that triggers once the ajax is done without interfering with the ...

javascriptangularjsajaxangular-datatables

NEXT JS - Application renders twice due to rewrites in place

I'm currently working on a NEXT JS project and facing the issue of the app rendering twice! Challenge After implementing rewrites in next.config.js, the app is being rendered twice. Removing the rewrites solves the issue and only renders once. next ...

javascriptreactjsnext.js

Typescript restricts dynamic property access within objects

I'm encountering some difficulties while attempting to access my object property in TypeScript: const sum = (type: string) => { return { status: 'Sum', value: data?[type].sum, }; }; sum('first') Here is a glimps ...

javascripttypescript

Ways to extract precise information from MongoDB with the help of Mongoose?

I am facing an issue with retrieving and displaying data from MongoDB Atlas to use in my Discord bot replies. Below is the code I used to submit the data: const subregis = "!reg ign:"; client.on("message", msg => { if (msg.content.includes(subregis)) ...

javascriptmongodbmongoosediscord.jsmongodb-atlas

Trying to showcase information received from a server using an API

For a school project, I am developing a website that can retrieve weather data (currently just temperature) based on a city or zip code from openweathermap.org using an asynchronous call. I have successfully retrieved the data from the API, but I am strug ...

javascripthtmlajax

The function req.isAuthenticated consistently comes back as false

if (process.env.NODE_ENV !== "production") { require("dotenv").config(); } const express = require("express"); const app = express(); const bcrypt = require("bcrypt"); const passport = ...

javascriptnode.jsexpressserver

rearranging the sequence of buttons using JavaScript

I am faced with the challenge of making a series of buttons draggable and droppable within a parent div without using any external libraries at the request of the client. Although I could have easily accomplished this task with jQuery, it's an opportu ...

javascriptdrag-and-drop

React - Updating child component each time the ref.current value is changed in the parent

Is it possible to make the child component Dashboard re-render whenever the value of showOfferDescription.current changes? I have found that using useRef is necessary in this case, as opposed to useState, because callback functions triggered by game.event ...

javascriptreactjsreact-hooks

Is there a method in CSS animations that allows for endlessly repeating successive animations in a specified sequence?

While working with CSS animations, I encountered a challenge of making two animations occur successively and repeat infinitely without merging keyframes. Is there a way to achieve this using only CSS? If not, how can I accomplish it using JavaScript? I a ...

javascripthtmlcsscss-animations

Navigating through a predetermined list of HTML pages with next and previous options

Hey there, I'm in a bit of a quandary at the moment. I've been searching on Google for quite some time now, but unfortunately, I can't seem to find what I'm looking for. Hopefully, you guys can lend me a hand. What I'm trying to d ...

javascriptjqueryhtmlarrays

Exploring the world of Django and JSON POSTs in the realm of Google API mania

Project Overview I am currently developing an application aimed at assisting users in finding rides. My tech stack includes Django, Python 2.7, and integration with Google Maps and Directions APIs. Within a specific view, I present a map where users can ...

javascriptdjangojsonpostgoogle-directions-api

What is the best way to enforce constraints on three keys when validating an object using Joi?

Currently experimenting with Joi for object validation. Able to validate objects with constraints on two keys using any.when(). Now looking to implement validation with constraints on three keys, for example: var object = { dynamicPrize: false, ...

javascriptjsonvalidationobjectjoi