Concealing Content within an Accordion

Looking for some guidance on setting up a mobile version of my product image with hover features. Currently using tooltips on desktop and planning to use a modified accordion on mobile, but struggling to make progress.

Customized some JS to toggle an accordion with "buttons" in separate divs. The buttons are functioning properly on mobile, but the panels don't hide when clicking another button. Need advice on resolving this issue.

Make sure to test it in a mobile window. Here's the updated code:

UPDATE: Fixed a formatting bug in the test code and added comments to JS and HTML.

SOLVED: Found a solution by reorganizing the HTML so that all panels are children of the same div. Used JavaScript to hide siblings and show the targeted element upon click.

if (document.documentElement.clientWidth < 1024) {
  jQuery(document).ready(function($) {
    $(".ul.one").click(function() {
      $("#panel-1").show();
      $("#panel-1")
        .siblings()
        .hide();
    });

Check out the Code Sandbox here

javascriptbootstrap-4

Answer №1

Resolved: I managed to find a solution on my own. Initially, I reorganized my HTML by making sure that all panels were children of the same div. Next, I implemented this javascript code to hide other siblings and display the desired element when clicked.

if (document.documentElement.clientWidth < 1024) {
jQuery(document).ready(function($) {
$(".ul.one").click(function() {
$("#panel-1").show();
$("#panel-1")
.siblings()
.hide();
});

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

What is the process for retrieving my dates from local storage and displaying them without the time?

Having an event form, I collect information and store it in local storage without using an API. However, I face a challenge when extracting the startdate and enddate out of localstorage and formatting them as dd-mm-yyyy instead of yyyy-mm-ddT00:00:00.000Z. ...

javascriptjqueryhtmlangularjsdate

Is combining Passport.js Google authentication with JWT a logical choice?

I am currently working on integrating Google Login with Passport.js into my MERN stack application. However, I have created this middleware for JWT authentication: const jwt = require("jsonwebtoken"); const config = require("config"); module.exports = a ...

javascriptnode.jsreactjsexpressmern

attempting to refine an array of objects using another array within it

I am currently filtering a group of objects in the following manner: [ { "Username":"00d9a7f4-0f0b-448b-91fc-fa5aef314d06", "Attributes":[ { "Name":"custom:organization", "Valu ...

javascriptarraystypescriptfilter

Using Vue3 to set attributes on web components

I recently developed a self-contained web component using Vite and Vue3 to replace outdated jQuery libraries. When this component is rendered in HTML, it appears like this: <custom-datepicker id="deliveryTime"> #shadow-root <div> ...

javascriptvue.jsvuejs3web-component

Deciphering unconventional JSON formats

Can anyone identify the format of this JSON (if it even is JSON!) from the code snippet below? I've extracted this data from a website's HTML and now I'm struggling to parse it in C# using a JSON parser. The data requires significant preproc ...

c#javajavascriptjsonstring-parsing

json How to retrieve the first index value in jQuery

As part of my Ajax loop, I am successfully generating JSON and iterating through the results. My goal is to extract only the first index value of JSON which is name. In jQuery, I have the following code: PHP $jsonRows[] = array( "name" => ...

phpjavascriptjqueryjson

Having trouble triggering a click event with React testing library?

I am working with a <Select/> component as shown in the image below. App.tsx import React, { useState, ChangeEvent } from "react"; import MySelect from "./MySelect"; export default function App() { const [countryCode, setCoun ...

javascriptreactjstypescriptjestjsreact-testing-library

How can I retrieve data submitted in a POST request on my Node.js server

I'm having trouble sending form data to a node/express server using AJAX. After submitting, I keep getting redirected to a 'Cannot POST /' page. Although I can log the request object on the server side, the data from the form is missing. Wha ...

javascriptajaxnode.jsexpress

Prevent data loss on webpage refresh by using Angular's local storage feature

As a beginner in Angular, I am exploring ways to retain user input and interactions on my webpage even after a refresh. After some research, I came across using local storage as a viable solution. A different answer suggested utilizing the following code s ...

javascriptangulartypescriptangular-local-storage

What is the best way to prematurely exit an outer function when there are multiple inner non-blocking function calls?

For the purpose of learning, I am working on creating a basic version of async.parallel. The description from the documentation is as follows: parallel(tasks, [callback]) Run the tasks array of functions in parallel, without waiting until the previou ...

javascriptnode.jsasynchronousnonblocking

Is there a way to still access the data from a radio button even if it hasn't been selected?

I'm currently working on a questionnaire feature and facing an issue where I need to capture all answers, even if the radio button is not checked. Here's a snippet of the HTML code: $('input:radio').each(function () { if ($(this). ...

javascriptjquery

Trouble arises when attempting to append a class through ng-class upon clicking

In a specific scenario, I am trying to change the border color from black to red in a div by appending a class using ng-class when clicked. However, when clicking a button, the modal opens but the class is not being appended as expected. <div ng-class ...

javascriptcssangularjs

Adjust the height of a div based on the font size and number of lines

I'm trying to create a function that automatically sets the height of a div by counting lines. I managed to get it partially working, but then it stopped. Can someone please help me with this? function set_height() { var div_obj=document.getEleme ...

javascripthtmlheight

Unable to place within div

Utilizing HTML5 to implement the "DnD" function. There is a button that adds divs. I want to be able to drag items into these newly added divs. Currently, I can only drag into existing divs and not the ones added later. How can I resolve this issue ...

javascriptjqueryhtml

Steps to set up a MessageCollector on a direct message channel

Hey everyone, does anyone have any tips on setting up the message.channel.createMessageCollector function for a direct message? I attempted to use message.author.dmChannel.createMessageCollector but it didn't work for me. Any advice? ...

javascriptdiscorddiscord.js

Does anyone have any sample code on processing JSON data from a URL using Modified JavaScript Value in Java?

Could anyone provide some examples on how to handle returned Json data using Modified JavaScript Value? Here is the specific data I require from the json url: { "result": { "data": [ { "name": "page1", "period": "dia", "values": [ { "value": 4, "end_time" ...

javascriptjsonpentahokettledata-integration

Creating a JSON Array from a PHP Array with json_encode()

I have used the built-in json_encode() function to encode an Array that I created. I am in need of formatting it into an Array of Arrays as shown below: { "status": "success", "data": [ { "Info": "A", "hasil": "AA" }, { " ...

javascriptphpjson

What is the best way to display or conceal buttons when the textarea is in focus or out of focus, while still allowing them

Seeking help to include two buttons beneath the input box. One button is for saving the input in the textarea, while the other is for aborting. The buttons should only be visible when the input field is focused. An issue I am facing is that clicking on ...

javascriptreactjsmaterial-uiformik

Django RGBField cannot locate jQuery

Working on a project that utilizes an RGBField, the following script is injected into the template (nested deep within django's structure, as its exact location remains elusive): <script type="text/javascript"> (function($){ ...

javascriptjquerypythondjangocypress

Unable to access the newly created object's properties following the instantiation of a new resource in AngularJS

Currently, I am in the process of developing a new Resource utilizing AngularJS that falls under the category of Person. After successfully creating this resource, my goal is to retrieve the id associated with the new resource from the server. it('sh ...

javascriptangularjsjasmineangularjs-resource