Issues with the functionality of the accordion menu

I have implemented an accordion menu on my website. However, I am facing an issue where the 2nd menu always slides up when it gets loaded instead of sliding up after clicking on it. I want the behavior to change so that the sub menus elaborate only upon clicking. I'm not sure how to achieve this. Below is the JavaScript code I am currently using:

function initMenu() {
    $('#menu ul').hide();
    $('#menu ul:first').show();

    $('#menu li a').click(function() {
        var checkElement = $(this).next();

        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return true;
        }

        if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
        }
    });
}

$(document).ready(function() {
    initMenu();
});

And here is the corresponding CSS:

#menu{
    font-family:'Open Sans';
    font-size:13px;
    text-align:center;

text-transform:uppercase;
line-height:15px;
width:250px;
font-weight:bold;




}
ul#menu, ul#menu ul {

  list-style-type:none;
  margin: 0;
  padding: 0;
  padding-top:5px;
  padding-bottom:0px;
  width: 15em;
  background:url(images/button_menu.png) no-repeat;
  line-height:15px;
}

ul#menu a {
  display: block;
  text-decoration: none;    
}

ul#menu li {
  margin-top: 1px;
}

ul#menu li a {

  line-height:15px;
  text-transform:uppercase;
  color: #fff;  
  padding: 0.5em;
  line-height:20px;

}

ul#menu li a:hover {

  background:url(images/button_menu_hover.png) no-repeat;
}

ul#menu li ul li a {
  background:#F7F7F7;
  color: #000;
  padding-top: 3px;
  padding-bottom: 3px;
  line-height: 14px;

  padding-left: 10px;
   border-bottom:0px;
   line-height:20px;

}

ul#menu li ul li a:hover {
  background:url(images/button_menu_hover.png) no-repeat;
  border-left: 5px #006600 solid;
  padding-left: 10px;
  color:#fff;
}

If anyone could provide guidance on how to resolve this issue, I would greatly appreciate it.

javascriptjquerycss

Answer №1

As I work on a similar project, here is the snippet of code that I extracted from my current codebase.

instance.$el.find('li.st-open').each( function() {
var $this   = $(this);
$this.css( 'height', $this.data( 'originalHeight' ) + $this.find('div.st-content').outerHeight( true ) );
});

This is how the CSS looks:

.st-accordion ul li.st-open > a{
margin-top:70px;
}
.st-accordion ul li{
height:auto;
}
.st-accordion ul li > a span{
 visibility:hidden;
}

Regarding the HTML structure, it appears as follows:

<div id="st-accordion" class="st-accordion">
   <ul>
      <li><a href="#"><h2>Title 1</h2></a>
          <div class="st-content">
            <p>Content goes here.</p>
          </div>
      </li>
      <li><a href="#"><h2>Title 2</h2></a>
          <div class="st-content">
            <p>Content goes here.</p>
          </div>
      </li>
  </ul>
</div>

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

The page is constantly updating on its own

In my React app, the App component checks for a token in local storage upon loading. If a token is found, it is verified. If the token is valid, the user is directed to the dashboard; otherwise, they are taken to the login page. The issue I am facing is ...

javascriptreactjsreduxwindow.location

Iterating through the entire table presents a challenge when trying to display multiple values on a single element

I'm facing a challenge in dynamically adding data from an SQL Table to HTML. Here is my loop: @foreach (var item in Model.ModulesSubStages) { <div class="row"> <div class="col-md-6"><a id="courseRed ...

c#htmlcssasp.netrazor-pages

In a Next.js application directory, how can you retrieve the router.asPath value within a function that utilizes the Next.js navigation feature?

import { useRoute } from "next/navigation" const route = useRoute() const updateData = () => { route.replace(route.asPath); } I attempted using next/router but it was unsuccessful ...

javascriptreactjsnext.js

Tips for dynamically updating the div class based on the model's value

How can I dynamically change the CSS class of a bootstrap element based on a value? I would like to display a div in green if the value is "OK" and red otherwise. If status = "OK", it should look like this: <div class="small-box bg-green">, else < ...

javascriptcssasp.net-mvcbootstrap-4

The operation of my NodeJS application suddenly halts

In my project, I have a Server.js file that I run from the command line using: node server Within the Server.js file, a new instance of class A is created Class A then creates instances of both class B (web socket) and class C (REST API) If the web socket ...

javascriptnode.jsinstance

Is Next.js the Ultimate Serverless Rendering Tool with Cloudflare Workers?

I am currently using Next.js version 9 and I am interested in utilizing Next's serverless deployment feature by integrating my application with Cloudflare Workers. According to the documentation for Next.js, all serverless functions created by Next f ...

javascriptnode.jsreactjsnext.jscloudflare-workers

Elements animated using intersection observer are inconsistently functioning on the current page

My current challenge involves animating elements with the intersection observer, but I am encountering strange behavior with elements that are already on the screen when the page loads. These elements sometimes animate correctly and other times they do no ...

javascriptfrontendintersection-observer

The correct method for accessing descendants in THREE.js in the latest version, r68

As of the release r68, the getDescendants() method has been removed from the THREE.Object3D API. How should we now achieve the same functionality without any warning message being provided? ...

javascriptthree.js

django, the X-CSRFToken in the request header is improperly configured

Essentially, I have managed to successfully send a CSRF token to the frontend and store it in the cookie section of the application tab within the developer console of the browser with this code: @method_decorator(ensure_csrf_cookie) def get(self, ...

javascriptpythonreactjsdjangocsrf

Develop a seamless user experience by creating dynamic forms using Jquery, PHP, and

I have been attempting to create a simple contact form using jQuery, AJAX, and PHP without refreshing the page. Everything seems to be working smoothly except for event.preventDefault(); Here are my files: Contact_engine.php <?php $name = $_POST ...

javascriptphpjqueryajaxwordpress

Encountering an issue while attempting to parse an XML file with AJAX

I am running into an issue in my .html file while using AJAX to display an xml file. My setup includes a button that should be able to read in both a json and an xml file. Strangely, the json button works perfectly fine, but when I try to use the xml butto ...

phpjqueryajaxxmljson

Implementing a 10-second alert display in selenium

Task at Hand: I need to display the alert on my page for a few seconds to allow reading. Is there any function in Selenium Web-driver that can help with this? I am new to automation and have been learning about explicit waits. I tried using explicit wait ...

javascriptjavaseleniumselenium-webdriverautomated-tests

Creating an If statement to evaluate the state of a parameter

In my simple Graphics User Interface, when the user clicks on "move", a yellow rectangle div moves across the screen. Now, I am trying to implement an event based on the position of the rectangle on the page. For example, if the div is at 400px (right), t ...

javascriptjqueryhtml

Updating ng-model with the values from a property in a collection in AngularJS

Encountering an unusual problem with setting the ng-model for a select drop-down menu. Despite using a property value that matches one in the ng-options, the ng-model consistently ends up as null. Below is the function responsible for fetching orders: o ...

javascriptangularjshtml-selectng-optionsangularjs-ng-model

Struggling to align a div vertically using CSS is causing me some difficulties

Hey there, I'm trying to figure out how to align the "container2" div to the bottom of the "container," but I'm running into some issues. Can anyone lend a hand? HTML <div id="container"> <div id="container2"> ...

htmlcssalignment

What could be causing my React Router component to display incorrect styling?

While working with react-router, I encountered an issue where the text from the routed page started appearing in the navbar. Even though I separated it as its own component and it functions correctly, this specific problem persists. As a newcomer to React, ...

javascriptcssreactjsreact-router

Hide only the table that is being clicked on, not all tables

Essentially, I am using document.querySelectorAll() to retrieve an array of div elements. In my function, handleClick(), each time the button is clicked, I want to hide the table associated with that specific button. This is the current situation: https:/ ...

javascriptcssreactjsecmascript-6react-hooks

Choosing a table cell in a React Bootstrap table

export class UsersTable extends React.Component { constructor() { super(); this.state = { data: null }; } componentWillMount() { fetch("http://localhost:8081/users/getData") .then(res => res.json()) . ...

javascriptreactjsselecthtml-tablebootstrap-4

How can a JQuery slideshow be programmed to only iterate once?

Looking to create a slideshow that transitions between images every two seconds? Check out the code snippet below: HTML: <div class="fadeIn"> <img src="img/city.png" class="remimg" id="city"> <img src="img/shop.png" class="remimg" ...

javascriptjqueryhtml

Angular JS has a unique feature of a scrollable drop-up menu that allows

https://i.sstatic.net/MOUqO.pngHere is the code snippet for my Dropup component: <div class="dropup"> <button class="btn btn-primary btn-raised dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false> ...

javascripthtmlcssangularjs