Expandable Menu that slides up and down

Here is a link to an Accordion Menu I have created: https://jsfiddle.net/wfr57s57/

This piece of JQuery Code controls the functionality:

$(".menu-item").click(function(e) {
    var allContents = $(".menu-content");
    e.preventDefault();
        if(allContents.hasClass("activeMenu")) {
            allContents.removeClass("activeMenu");
        }
    var content = $(this).next().find(".menu-content");
    content.toggleClass("activeMenu");
});

While it works well, I am looking for a way to make it such that clicking on a new menu item will slide up any open content before displaying the new one.

If you have any suggestions or improvements on this solution, please feel free to share. Thank you! :)

javascriptjqueryhtmlcss

Answer №1

Consider utilizing heights as an alternative to negative margins for toggling visibility

 .inner {
    height: 0;
}

 .activeMenu { //displayContent
    min-height:200px;

Answer №2

Have you considered implementing the jquery slideUp and slideDown effects?

$(".menu-item").click(function() {
  if ($(this).next('.menu-outer').hasClass('opened')) {
    $(this).next('.menu-outer').slideUp().removeClass('opened')
  } else {
    $('.container.opened').slideUp().removeClass('opened')
    $(this).next('.menu-outer').slideDown().addClass('opened')
  }
});
.menu-item {
  width: 100%;
  height: 60px;
  line-height: 60px;
  font-size: 15pt;
  cursor: pointer;
  margin-bottom: -1px;
  color: #ffffff;
  background-color: gray;
}

.menu-content {
  overflow: hidden;
}

.menu-outer {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <div class="menu-item">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          Title
        </div>
      </div>
    </div>
  </div>
  <div class="menu-outer container">
    <div class="row">
      <div class="col-lg-12">
        <div class="menu-content">
          <div class="inner">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="menu-item">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          Title
        </div>
      </div>
    </div>
  </div>
  <div class="menu-outer container">
    <div class="row">
      <div class="col-lg-12">
        <div class="menu-content">
          <div class="inner">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

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

Analyzing div tags using Nokogiri

There's a piece of code that effectively extracts tid and term data: (answered generously by Uri Agassi) for i in (1..10) doc = Nokogiri::HTML(open("http://somewebsite.com/#{i}/")) tids = doc.xpath("//div[contains(concat(' ', @class, ...

htmlruby-on-railsrubyxpathnokogiri

Is there a way to ensure that an external file function completes before proceeding with the main code execution?

In my project, I have two key JavaScript files: main.js and load.js. Within load.js, there are two essential functions - getData, which makes an AJAX post call, and constHTML, which appends data based on the JSON array returned from the AJAX call. This app ...

javascriptjquerycarousel

When a user clicks on an element, use jQuery to show a specific

I am looking to extract the Admission ID field within a separate function that triggers when a user clicks on a button. $(document).ready(function () { $.each(data.student, function (i, item){ trHTML += '<tr>'+ ...

javascriptphpjquery

What steps should I take to resolve this unexpected issue with svelte?

Whenever I attempt to execute the application, an error is consistently displayed to me. Here is a screenshot of the error: https://i.sstatic.net/jfo3X.png This issue always arises on the initial import type line, regardless of the content or arrangement ...

javascripttypescriptsvelte

A guide on handling POST response body parsing in NodeJS

const express = require("express"); const bodyParser = require("body-parser"); const app = express(); app.use(bodyParser.urlencoded({extended: true})); app.get("/", function(req, res){ res.sendFile(__dirname + "/index.html"); }); app.post("/", function(r ...

javascripthtmlnode.jsexpress

Creating web applications using Eclipse IDE and HTML5

Seeking a reliable IDE for creating HTML5 applications, I've heard Eclipse is a good option, which I am already familiar with in my coding projects. Currently using Eclipse Helios Release, wondering if I should upgrade to Eclipse Helios Service Relea ...

eclipsehtml

Ways to boost heap capacity in Corb2 for MarkLogic

I encountered a challenge while running my custom deletion framework on a massive dataset. When attempting to execute Corb2, I started receiving the warning below and occasionally even encountered errors due to insufficient memory. WARNING: Slow receive! C ...

javascriptunixmarklogicmarklogic-corb

What are the distinctions in form validation behavior between Bootstrap 3 and Bootstrap 4?

I am encountering issues while trying to use a Bootstrap form validation library on my form. Surprisingly, it functions smoothly with Bootstrap 3 but not with Bootstrap 4. I am perplexed by the differences in behavior between BS3 and BS4 forms. The signif ...

phpjquerytwitter-bootstrapbootstrap-4

Is there a way to switch tabs through programming?

Is there a way to switch between tabs using jQuery or JavaScript when using the tabbed content from ? I have tried using $("tab1").click(); I have created a fiddle for this specific issue which can be found at: https://jsfiddle.net/6e3y9663/1/ ...

javascriptjquerytabs

What are the implications of incorporating listeners in redux action creators?

While developing my app, I have a feature that involves constantly monitoring location changes and updating the store accordingly. One question that has arisen is whether it would be beneficial to keep the listeners inside the action creator rather than th ...

javascriptreactjsreact-nativereduxredux-thunk

Chokidar operates smoothly from the command line, but fails to function properly when invoked through the use of 'npm run'

I've implemented a script that monitors Tailwind CSS files using Chokidar. The script works perfectly when I execute the command in the CLI using chokidar 'tailwind.config.js' --initial=true -c 'npm run build-tailwind'. It successf ...

javascriptnode.jsnpmchokidar

What is the proper way to include a CSRF token when uploading a file?

Below is the HTML code that I'm working with: <input id="input-id" type="file" accept=".mp3, .mp4" name="file" class="form-control"><br> <input type="hidden" id="getfilename" name="uploadedfile" value=""> In order to upload a file, ...

phpjquerylaraveljquery-pluginslaravel-5.3

How to remove hover effect specifically from collapsed navbar in Bootstrap?

I created a webpage with a navigation bar that has links which scroll to different sections on the page. I added a hover animation to the links using the code below: .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li a:active { box ...

jquerycsstwitter-bootstrap

`html2canvas encountered an issue: Unable to locate a logger instance`

When I use html2canvas to render the same content repeatedly, I encounter an error about 5% of the time. It seems to be sporadic and I'm not sure why it occurs. What could be causing this unpredictable behavior? html2canvas.js:2396 Uncaught (in promi ...

javascripthtmlhtml2canvas

Struggling to access a remote URL through jQuery's getJSON function with jsonp, but encountering difficulties

Currently, I am attempting to utilize the NPPES API. All I need to do is send it a link like this and retrieve the results using jQuery. After my research, it seems that because it is cross-domain, I should use jsonp. However, I am facing difficulties m ...

javascriptjsonajaxapi

Repositioning a div element within a different parent div

Is there a way to transfer the contents of one div to another using Javascript? I am looking to move the contents of .sidebar from .post to .carousel. Can someone provide guidance on how to achieve this using Javascript? I aim to transform the structure ...

javascriptjquerycss

How to retrieve a value from an array using a specific name rather than a numerical key

After creating an object and adding an asset b345 with some properties in it, such as: asset = []; asset.push({'b345' : { 'prop1':'value 1', 'prop2': null}}); I aim to dynamically add more assets later into the sa ...

javascriptnode.js

Is it possible to conduct a feature test to verify the limitations of HTML5 audio on

Is there a way to detect if volume control of HTML5 audio elements is possible on iOS devices? I want to remove UI elements related to the volume if it's not alterable. After referring to: http://developer.apple.com/library/safari/#documentation/Aud ...

javascriptioshtmlwebhtml5-audio

Discover the complete guide on incorporating a JavaScript library with additional dependencies in Angular 2

I am a beginner with angular 2 and I am attempting to integrate the Miso Dataset JavaScript library into my angular 2 project. The Miso library requires other JavaScript libraries as dependencies. Although I have included all the necessary JavaScript file ...

javascriptangular

Tips for displaying a loading message during an AJAX request?

My AJAX function is set up like this: function update_session(val) { var session_id_to_change=document.getElementById('select_path').value; $.ajax({ type: "GET", url: "/modify_path/", asy ...

javascripthtmlajax