How can you create an accordion menu that expands when a button is clicked?

Is there a way to make an accordion menu open when the 'More' button is clicked? I've tried, but it always starts in its expanded state and collapses when the button is clicked. What I really want is for the accordion to be closed initially and then open when the button is clicked.

Can someone please provide some guidance?

<input id="hide" value="+" src="./img/Mainpage-more-icon.png" type="button" /><br/>
<div id="rightMenu">
    <ul>
        <li>sss</li>
        <li>sss</li>
        <li>sss</li>
    </ul>
</div>
<script>
    $(document).ready(function() {
        $('#hide').click(
                function() {
                    //show its submenu
                    $("#rightMenu").stop().slideToggle(500);
                }
        );
    });
</script>

Answer №1

Include the following code snippet in your ready function:

$("#rightMenu").hide();

Alternatively, you can apply the CSS style display:none to achieve the same result.

Answer №3

Apply the CSS rule display:none to hide an element

<input id="hide" value="+" src="./img/Mainpage-more-icon.png" type="button" /><br/>
<div id="rightMenu" style="display:none;">
<!--------------------^-------^--------->   
    <ul>
        <li>sss</li>
        <li>sss</li>
        <li>sss</li>
    </ul>
</div>
<script>
    $(document).ready(function() {
    $('#hide').click(
            function() {
                //show its submenu
                $("#rightMenu").stop().slideToggle(500);
            }
       );
  });
</script>

FIDDLE

Alternatively, you can use jQuery to hide the element when the DOM is ready by using the hide() method

<input id="hide" value="+" src="./img/Mainpage-more-icon.png" type="button" /><br/>
<div id="rightMenu">
    <ul>
        <li>sss</li>
        <li>sss</li>
        <li>sss</li>
    </ul>
</div>
<script>
    $(document).ready(function() {
    $("#rightMenu").hide();
    $('#hide').click(
            function() {
                //show its submenu
                $("#rightMenu").stop().slideToggle(500);
            }
       );
  });
</script>

FIDDLE

Answer №4

Start by implementing the slideToggle function.

Take a look at this JSFiddle example

$('#rightMenu').stop().slideToggle(500);
$('#hide').click(
    function () {
        // Display the submenu
        $("#rightMenu").stop().slideToggle(500);    
    }
);

It's okay if you're not familiar with all of JQuery - basic knowledge can easily be found through Google.

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

Unveil SQL Limit with a Simple Scroll Load

After successfully laying out and creating my website, the next step is to load more results on scroll. This question has been posed numerous times before, but I am curious if there is a simple solution that can seamlessly integrate into my current setup. ...

The value could not be retrieved because the input name depends on the array index

To determine the name of the input based on the array index, use the following method: <div id="editAboutSantences<%=i%>" class="edit-container"> <div class="input-container"> <label> content: </label> ...

Error: ytcfg and __ytRIL are undefined and cannot be referenced

For several months, I had smooth sailing with the YouTube IFrame Player API until recently when an unexpected exception popped up upon loading the player: Uncaught ReferenceError: ytcfg is not defined Upon inspecting the iframe, I noticed that yt.setConfig ...

Is there a specific jest matcher available for comparing Array<Objects>?

I'm currently testing the equality of two arrays of objects and have found that the toEqual matcher in Jest only works for arrays of strings. Is there another matcher available in Jest that can handle this condition? Please refrain from marking this a ...

When using jQuery load and TinyMCE, I encountered an error stating "g.win.document is null" upon subsequent loads

New to stackoverflow and thrilled to make my first post! I'm working on a page where clicking a button triggers the function editIEPProgram(). This function counts how many specific divs exist, adds another div, loads it with content from '/cont ...

The "tsc" command in Typescript seems to be acting up. I've exhausted all possible solutions but

Hello there, I find myself struggling to run Typescript throughout the day while utilizing Visual Studio Code. My usual method involves installing TS globally: $ npm install -g typescript But every time I try to use it, I encounter the same error: bas ...

Having images that are too large in size and using a high percentage can

I'm encountering a strange issue. When I define the width and height of my images in pixels in my CSS file, all my jQuery animations and events work perfectly fine. However, when I switch to using percentages or 'auto' for the image dimensio ...

What is the reason behind the quicker search for the median in a 100-item array compared to a 10-item array?

I conducted experiments to verify this, and the results were not entirely as anticipated: http://jsperf.com/value-in-array-or-object Feel free to run your own tests as well. ...

Unable to assign a value to a variable in JavaScript

Today, I delved into the world of JavaScript and decided to test my skills by creating a page that changes images when clicking on a div. Everything worked perfectly until I wanted to add an input element to specify how many steps to jump each time the but ...

aligning an icon in the middle of its container

I'm having trouble centering an icon vertically inside its box only. I've tried using vertical-align: middle; but it doesn't seem to be working. I also attempted the line-height method, but the icon has an outer border that stays attached to ...

The directive in Angular compels the webpage to carry out the added HTML attribute

There is a custom directive in my code that applies the spellcheck attribute to two div elements as shown below: (function(){ 'use strict'; app.directive('spellchecker', spellchecker); spellchecker.$inject = ['$timeout&a ...

A Guide to Importing CSV Data Into a Datatable

Is there a way to efficiently import data from a CSV file and display it in a table using the datatables plugin? Currently, I have a fixed table structure: <table id="myTable" class="table table-striped" > <thead> ...

Increasing the value of an external variable in MySQL Query through NodeJS

Currently, I am in the process of developing an API using NodeJS and MySQL. The main function of this API is to create new entries by executing queries one by one. In order to keep track of the successful execution of these queries, I have introduced a va ...

Is there a potential issue with descender tags causing the malfunction of HTML and CSS tags?

Having some trouble with my <p> tag in the CSS. Can't seem to figure out why it's not working correctly. Any help is appreciated. Here's the HTML: <body> <section> <section id="pictures"> <div> < ...

Issue with aligning content vertically in a Bootstrap 3 div

My attempt at vertically aligning text within a div using the following code snippet did not yield the desired result (see fiddle): <div class="container-fluid"> <div class="row"> <div class="col-xs-2"> This conte ...

Design an HTML watermark input that remains visible as the user starts typing

I'm currently in the process of developing an application that enables businesses to access their account through theirname.mydomain.com. I am working on creating a signup form for this purpose. Today, I stumbled upon squarespace and noticed they hav ...

The rendering of graphs in FusionCharts is experiencing delays particularly in Internet Explorer, with Chrome performing more efficiently in comparison

I am currently utilizing FusionCharts to generate and display graphs. My requirement is to load over 60 graphs on a single page. Upon testing the page loading in Internet Explorer 11, it is taking approximately 5 minutes. However, when using Google Chrom ...

Karma and RequireJS fetching files beyond the base URL

My goal is to set up automatic testing using karma with the following file structure: /assests /css /font /img /js /collection /lib /model /plugin /spec /view test-main.js main.js /templates index.html karma.conf.js In my ...

How to handle passing null values to an ASP .NET MVC controller using jQuery ajax

I've been encountering an issue where I am trying to send a stringified array from the view using $.ajax, but I keep receiving null in the controller function. Here's the code for the controller: [HttpPost] public void SaveColumnsToDb(str ...

Looking to maintain the value of a toggle button in a specific state depending on certain condition checks

I have a situation where I need to keep a toggle button set to "off" if my collection object is empty. Previously, I was using v-model to update the value of the toggle button. However, now I am attempting to use :value and input events, but I am strugglin ...