Toggle the click event in Javascript to turn it off

I've been busy trying to incorporate multiple expanding divs into a webpage, but I'm struggling to make the divs collapse automatically when another one expands. This is the script I've been experimenting with:

$(document).ready(function() {
    $('.nav-toggle').click(function(){
        var collapse_content_selector = $(this).attr('href');                   
        var toggle_switch = $(this);
        $(collapse_content_selector).toggle(function(){
            if($(this).css('display')=='none'){
            }
        });
    });
}); 

Answer №1

Give this a shot:

$(document).ready(function() {
    $('.toggle-nav').click(function() {
        var chosen = $($(this).attr('href'));
        $(".expandable").not(chosen).hide();
        chosen.toggle();
    });
});

Swap out .expandable with the class you use for your collapsible sections.

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

route in mean stack isn't providing a response

I am having trouble creating a controller for /projects that should return all the data in the 'work' collection. The call is completing successfully with a status code of 200, but it is only returning an empty array or 'test:test' if u ...

Assigning identical values to all properties of an object

Let's consider an object structured like this: myObject = { "a_0" : [{"isGood": true, "parameters": [{...}]}], "a_1" : [{"isGood": false, "parameters": [{...}]}], "a_2" : [{"isGood": false, "parameters": [{...}]}], ... }; The goal is ...

Why is Node.js unable to locate my files?

I'm currently utilizing Node.js as my server, and I'm encountering some difficulties in serving my JS and CSS files. For some reason, index.html is unable to locate them. Whenever I try to load up my browser, I encounter the following error: htt ...

Enclose chosen images with selection made

Below is the code snippet I am working with: <select multiple="multiple" class="image-picker show-html"> <option data-img-src="http://placehold.it/125x200" value="1">SportField 1</option> <option data-img-src="http://placehold ...

Error message "env: '/bin/flask': No such file or directory" pops up while executing the command "npm run start-backend"

Currently on the hunt for a super basic website template that combines Flask and React. I've been using this repository and carefully following the installation steps laid out https://github.com/Faruqt/React-Flask Working on Windows 10 using git Bas ...

Trouble with linking an external JavaScript file in HTML document

I'm having some trouble including an external JavaScript file in my HTML. I followed the steps but the pie chart is not showing up as expected. Can someone please take a look and let me know if I missed anything? Here's the link to where I got th ...

Launching the mongo-dev-server for the project's local mongo database while utilizing an external MongoDB during Meteor Run

Q. How can I leverage mongo-dev-server to utilize an internal MongoDB in my Meteor project while also using an external MongoDB with 'export MONGO_URL'? Explanation: I know that MongoDB should be fully installed for production mode, but sometime ...

Error in Angular Universal: KeyboardEvent is not defined

I have inserted the word "domino" into the server.ts file and updated the webpack.server.config.js as follows: module: { rules: [ { test: /\.(ts|js)$/, loader: 'regexp-replace-loader', options: { match: { pattern: '&bs ...

Verify the functionality of the input fields by examining all 6 of them

I'm facing a challenge with a validation function in my project that involves 6 input fields each with different answers. The inputs are labeled as input1 to input6 and I need to verify the answers which are: 2, 3, 2, 2, 4, and 4 respectively. For e ...

What could be causing the error "insertOne is not a valid function" in my MongoDB database?

When the code attempts to connect to the mongodb database: const dbConnect = async () => { try { await client.connect(); const db = client.db('smile-tracker'); const users = db.collection('users'); retu ...

Assign the form's data to a backbone model in order to invoke a REST service

I am a newcomer to backbone. I have set up a form. <form name="searchForm" method="POST" id="CandidateSearch" ` enctype="application/json" accept-charset="utf-8"> <br> <br> <div class="container" style="backgro ...

Are you able to create autonomous VueJS components using webpack?

After successfully creating a single-page application using vuejs-templates/webpack, I am now working on developing a static website. Since most of the content is static, there is no need for it to function as an SPA. The basic HTML/CSS layout has already ...

Utilizing the .env values in nuxt.config.js using runtime configuration - A step-by-step guide

I'm trying to figure out how to utilize a .env value in nuxt.config.js using runtime config. It's easy to declare and use it in regular code. publicRuntimeConfig: { URL_API: process.env.URL_API || 'http://localhost:8000/', }, ...

Rotating elements with timed jQuery

I'm having trouble getting the selector to rotate at different intervals. I attempted using an if/else statement to make the first rotation occur after 3 seconds and subsequent rotations occur after 30 seconds. Unfortunately, it's rotating every ...

Creating a visually stunning image grid akin to the meticulously designed layouts found

Forgive my lack of knowledge, but I'm curious about how to create an image or text grid similar to Tumblr using HTML and CSS. I'm looking to achieve a layout like this: ...

Alter the content of a div by simply clicking on it without leaving the current page

I am facing an issue where the main topics in my menubar only have text introductions and no images. I would prefer a solution where when clicking on "about me", instead of loading a full page, only the content of that particular div changes. The idea is t ...

Utilizing multiple API requests within a single Angular service

I am using Angular $http requests to access an API and retrieve information about various football teams. If I were only dealing with one team, it would be simple - I would create a Service that makes the request and then use that function in my controlle ...

Is it possible to utilize viewport height as a trigger for classes in Gatsby?

Unique Case Working on a Gatsby site with Tailwind CSS has brought to light an interesting challenge regarding different types of content. While the blog pages fill the entire viewport and offer scrolling options for overflowing content, other pages with ...

Utilize the clearChart() function within Google charts in conjunction with vue-google-charts

I have integrated vue-google-charts to display various charts on my website. I want to allow users to compare different data sets, by enabling them to add or delete data from the chart. In order to achieve this functionality, I need to find a way to clear ...

Line numbers in Vue Codemirror

Currently, I'm working on integrating codemirror into my Vue.js application using a library found at https://github.com/surmon-china/vue-codemirror. The issue I'm facing is that even after importing and utilizing the codemirro component, everythi ...