Collapse or display div elements with jQuery - First close all other elements before opening the selected item

The Problem at Hand

Currently, the script is expected to hide all elements with the "gallery-collapse" class and reveal the specific content based on the clicked link. However, sometimes multiple divs might appear simultaneously when switching between items.

The Desired Outcome

The ideal scenario would involve ensuring that all other elements are closed before opening the selected item. For instance, clicking on an anchor tagged with "speaker1-expand" should close all instances of "gallery-collapse" and then toggle the "speaker1-content".

The Script in Action

<script>
j(".speaker1-content, .speaker2-content, .speaker3-content, .speaker4-content, .speaker5-content, .speaker6-content, .speaker7-content").hide();
j('.speaker1-expand').click(function(){
    j(".gallery-collapse").hide();
    j('.speaker1-content').slideToggle('slow');
});
j('.speaker2-expand').click(function(){
    j(".gallery-collapse").hide();
    j('.speaker2-content').slideToggle('slow');
});
j('.default-expand').click(function(){
    j(".gallery-collapse").hide();
    j('.speaker-default').slideToggle('slow');
});
</script>

Explore the Demo

http://jsfiddle.net/2SCJe/10/

Answer №1

If you want to optimize the code, you can try simplifying it like this:

j("[class*='-content']").hide();

j('[class^="speaker"]').click(function(){
    var toggleClass = j(this).attr("class").split("-")[0] + "-content";
    
    j("[class*='-content']").hide();
    j(".gallery-collapse").hide();

    j("." + toggleClass).slideToggle("slow");
});

Check out this demo on Fiddle: http://jsfiddle.net/Y6mHj/

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

Content will not render when JavaScript generates SVGs

As I delve into the world of JavaScript and SVG to create interactive graphics for a website, I've run into a puzzling issue with programmatically generated SVG paths not being drawn. Below is a sample code that highlights this problem: <!DOCTYPE ...

Ways to customize a directive to show conditionally with no need for container elements

I have created a basic role-based security directive in angularjs. It's my first attempt at making a directive. My goal is to replace the following HTML: <authorize if-granted="GET_POSTS"> Hello WORLD!!!! {{name}} </authorize> with j ...

Box-sizing:border-box causing CSS padding problem in Firefox

Something strange is happening in Firefox, it seems like the debug console is not telling the truth or there's something I'm not seeing. Here's the CSS for the body tag: html, body { width: 100%; } body { padding: 5% 10% 0 10%; ...

Angular's UI router is directing users to the incorrect URL

Just starting out with Angular 1 and tasked with adding a new feature to an existing webapp. The webapp utilizes jhipster for backend and frontend generation (Angular 1 and uirouter). I attempted to create my own route and state by borrowing from existing ...

What is the most efficient way to calculate the sum of all the numbers lying between the endpoints

I am faced with a complex array The array looks like this: let arr = [[2, "OR", 22, 22, "OR", 22, 20], [300, "OR", 22, 300, "OR", 22, 22, "OR", 1], [1212, 2, "OR", 1]] My goal is to extract and ...

Overflow is causing interference with the scrollY value

I've been attempting to retrieve the scrollY value in my React app, but it seems to be affected by overflow-related issues. Below is the code snippet I used to access the scrollY value: import React from "react"; import { useEffect, use ...

Fixing PNG Fading Issue in Internet Explorer 8

I am currently utilizing the jQuery Cycle plugin to produce a fading animation effect. While this works perfectly on most browsers, I have encountered an issue with PNG files containing semi-transparent pixels in Internet Explorer 8. These partially transp ...

Can you provide instructions for generating a simple menu bar with options utilizing webgl/three.js?

I find the documentation for the three.js 3-D viewer difficult to understand as a beginner. I am curious about the fundamental steps involved in creating a menu bar or selector with options for a 3-D viewer using three.js / WebGL. Additionally, I am inter ...

CSS Hue Rotate is causing the image to appear darker

The CSS filter hue-rotate seems to be darkening my image according to my observations. For an example, visit: https://jsfiddle.net/m4xy3zrn/ Comparing images with and without the filter applied, it’s clear that the filtered one appears much darker than ...

utilizing an ajax request to clear the contents of the div

When I click on Link1 Button, I want to use ajax to empty the contents in the products_list div <button type="w3-button">Link1</button> I need help with creating an ajax call that will clear the products in the product_list when the link1 but ...

Problem arises when attempting to display a div after clicking on a hyperlink

I'm encountering an issue with displaying a div after clicking on a link. Upon clicking one of the links within the initial div, a new div is supposed to appear below it. All tests conducted in jsfiddle have shown successful results, but upon transf ...

Issues with tangents in three.js compared to the VertexTangentsHelper with problems on display

After enabling the "vertexTangentsHelper" feature in THREE.js, I've noticed that the tangents on various geometries appear to be incorrect. I'm questioning whether these tangents are being miscalculated (possibly due to my shader output) or if t ...

Phaser - Revamp cache of DOM elements in loadState and bootState for

I created a game using Phaser.js and now I want to clean the cache of my loadState and bootState in order to remove image links. Currently, I am using Phaser.Cache to remove all the cache in my Game, but it seems that only the Game cache is being cleared. ...

Uploading video files using XMLHttpRequest encountered an error on a particular Android device

One of our testers encountered an issue where they failed to upload a video file (.mp4) on a specific Android mobile phone. Interestingly, the same file uploaded successfully on an iPhone and another Android device. To investigate further, I attempted to ...

Square Power Box

I have been attempting to create two equal sections, one displaying an image and the other showing text, both maintaining a square shape with identical width and height. I am using the Avada theme on Wordpress along with Element Builder and custom CSS to a ...

Guide to setting the first tab as the default tab using Thymeleaf, Css, and Bootstrap

I am currently working on a project where I need to dynamically create tabs based on a list retrieved from my Spring backend using Thymleaf and Bootstrap. While I have managed to successfully create the tabs and content, I am facing an issue where the fi ...

Utilize JQuery to inject both standard HTML elements and safely rendered escaped HTML onto a webpage

After storing some data in firebase that can be retrieved on the client side, I use JQuery to add it to the HTML. Although the process of prepending the data to the DOM element is straightforward, there is a security concern as raw code can make the applic ...

I am experiencing an issue where the Axios configuration does not display the OnUploadProgress on my response

I have been attempting to track the progress of file uploads from the front end, but I am encountering an issue where the onUploadProgress is not being received in the configuration catch. This problem arises as I am relatively new to using Axios. axios({ ...

Utilizing JavaScript and jQuery to make a query to mySQL

Looking to solve a SQL database query challenge using JavaScript or jQuery? Here's the scenario: I have a SQL db and typically use the following query to retrieve data based on distance from specified coordinates: SELECT id, ( 3959 * acos( cos( rad ...

how to transfer data from backend servlet to frontend javascript

Hey, I'm still learning about servlets so please excuse any confusion in my message! So basically, I'm trying to figure out how to pass a value from a servlet to JavaScript or even retrieve values from a servlet method within JavaScript. But I&ap ...