Switch off any other currently open divs

I'm currently exploring a way to automatically close other div's when I expand one.

Check out my code snippet below:

$( document ).ready(function() {
$( ".faq-question" ).click(function() {

$(this).toggleClass('open');
$(this).parent().next('.field-faq-answer').toggle();
});

});
.field-faq-answer{
display:none;
}
.faq-antwoord{
border-bottom: 1px solid #ccc;
margin-top:10px;
padding-bottom:10px;
}
.faq-antwoord p{
margin-bottom:0px;
padding-left: 10px;
    border-left: 2px solid #3395d3;
margin-left:10px;
}
.field-faq-question-first{
border-top: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Title 1
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord"gt;
        <p>
          TEST 1
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Title 2
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 2
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Title 3
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TEST 3
        </p>
      </div>
    </div>
</div>

Currently, you can click on Title 1 and Title 2, and both contents will be displayed. However, I would like only one answer to show while hiding the others.

javascriptjqueryhtmlcss

Answer №1

If you want to achieve this, you can use the hide() function on all other elements with the class .field-faq-answer, except for the one that was clicked. Here's how you can do it:

$(document).ready(function() {
  $(".faq-question").click(function() {
    $(this).toggleClass('open');
    var $target = $(this).parent().next('.field-faq-answer').toggle();
    $('.field-faq-answer').not($target).hide();
  });
});
.field-faq-answer {
  display: none;
}

.faq-antwoord {
  border-bottom: 1px solid #ccc;
  margin-top: 10px;
  padding-bottom: 10px;
}

.faq-antwoord p {
  margin-bottom: 0px;
  padding-left: 10px;
  border-left: 2px solid #3395d3;
  margin-left: 10px;
}

.field-faq-question-first {
  border-top: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
  <div class="field-faq-question field-faq-question-first">
    <h3 class="faq-question">
      Title 1
    </h3>
  </div>
  <div class="field-faq-answer">
    <div class="faq-antwoord">
      <p>
        TEST 1
      </p>
    </div>
  </div>
</div>
<div class="faq-container">
  <div class="field-faq-question field-faq-question-first">
    <h3 class="faq-question">
      Title 2
    </h3>
  </div>
  <div class="field-faq-answer">
    <div class="faq-antwoord">
      <p>
        TEST 2
      </p>
    </div>
  </div>
</div>
<div class="faq-container">
  <div class="field-faq-question field-faq-question-first">
    <h3 class="faq-question">
      Title 3
    </h3>
  </div>
  <div class="field-faq-answer">
    <div class="faq-antwoord">
      <p>
        TEST 3
      </p>
    </div>
  </div>
</div>

Answer №2

Give this a shot:

$( document ).ready(function() {
    $( ".question-answer" ).click(function() {

        $('.field-question-response').toggle();
        $(this).toggleClass('open'); 
    });

});

Answer №3

You have the ability to focus on all elements except for the ones currently being edited and close them

$( document ).ready(function() {
    var inquiries = $( ".faq-question" ).on('click', function() {
        $(this).toggleClass('open');
        inquiries.not(this).removeClass('open');

        var response = $(this).parent().next('.field-faq-answer').toggle();
        $('.field-faq-answer').not(response).hide();
    });
});

Answer №4

One approach is to employ the nextAll() function for the parent of the parent element, known as faq-container, followed by using find to target the field-FAQ-answer and toggle its visibility.

$(this).parent().parent().nextAll('.faq-container').find('.field-faq-answer').toggle();

Answer №5

$( document ).ready(function() {

$( ".faq-question" ).click(function() {
  $('.faq-container .field-faq-answer').hide();
$(this).toggleClass('open');
$(this).parent().next('.field-faq-answer').toggle();
});
  

});
.field-faq-answer{
display:none;
}
.faq-antwoord{
border-bottom: 1px solid #ccc;
margin-top:10px;
padding-bottom:10px;
}
.faq-antwoord p{
margin-bottom:0px;
padding-left: 10px;
    border-left: 2px solid #3395d3;
margin-left:10px;
}
.field-faq-question-first{
border-top: 1px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Title 1
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TESTING 1
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Title 2
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TESTING 2
        </p>
      </div>
    </div>
</div>
<div class="faq-container">
    <div class="field-faq-question field-faq-question-first">
      <h3 class="faq-question">
        Title 3
      </h3>
    </div>
    <div class="field-faq-answer">
      <div class="faq-antwoord">
        <p>
          TESTING 3
        </p>
      </div>
    </div>
</div>

Give it a try to see the results.

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

Guide on linking an XML reply to TypeScript interfaces

Currently, I am faced with the task of mapping an XML response (utilizing text XMLHttpRequestResponseType) from a backend server to a TypeScript interface. My approach has been to utilize xml2js to convert the XML into JSON and then map that JSON to the Ty ...

javascriptxmlangulartypescriptxml2js

What is the best way to select an HTML tag element using the :v-deep() selector?

When I utilize the following: ::v-deep img { ... } it functions but triggers a deprecation warning: [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead. How can I achieve the same effect using ...

cssvue.jsvuejs3

Individual ".htaccess" and ".htpasswd" files are created for every webpage

I have a main page with links to 3 other pages (all within the same folder) named: content1.html, content2.html, and content3.html. <html> <body> <ul> <li><a href="content1.htm">content1</a></li> <li> ...

html.htaccess

Node.js: Module not found error

When I run the command below to install a module from the NPM registry: npm install dc All files are successfully installed, but upon running the script dc, it fails to resolve a dependency. $ node web-test.js module.js:340 throw err; ^ Error: ...

javascriptnode.jsmodulenpmsinon

Extra horizontal spacing in CSS

Struggling to eliminate the excess horizontal space on my HTML/CSS page. Any thoughts on what might be causing this? Appreciate any help! ...

htmlcssspaceextra

Implementing a dynamic update of an HTML element's content with JSON data - Learn how!

My task involves creating a quiz application where I need to show the answers along with images of the choices stored in my JSON data. However, I encounter an error: Uncaught TypeError: Cannot set properties of null (setting 'src') when I attempt ...

javascripthtmljson

What is the best way to retrieve the current directory of the executed javascript file?

My javascript file is located in a folder at this path: /httpdocs/wp-content/themes/themeName/users/js I have some PHP files in another directory within the same theme, where I need to send Ajax Requests: /httpdocs/wp-content/themes/themeName/users Is ...

javascriptphpjqueryajaxwordpress

Is it possible to transform a webpack configuration into a Next.js configuration?

i have come across a webpack configuration setup from https://github.com/shellscape/webpack-plugin-serve/blob/master/recipes/watch-static-content.md: const sane = require('sane'); const { WebpackPluginServe: Serve } = require('webpack-plugin ...

javascriptnode.jswebpacknext.jswebpack-config

Remove the "x" character from the phone field if an extension is not provided in the Jquery masked input plugin

Currently utilizing the jquery Masked input plugin. The mask I have applied to a field is as follows: "?999-999-9999 x9999" Why is there a ? at the beginning? This was implemented to prevent the field from clearing out when an incomplete number is ente ...

javascriptjquerymaskedinputjquery-mask

Tips for adjusting the height of both an iframe and a div to fit perfectly at 100% combined

Struggling to make an iframe and div both have 100% full height on the page? I need a footer menu with 280px height, leaving the rest of the page for the iframe. After extensive research, it seems like jQuery might be necessary as CSS Flex didn't wor ...

javascriptjqueryhtmlcssiframe

Guide to invoking a bootstrap modal dynamically within a loop with the help of jQuery

I'm currently facing an issue with my code that involves inserting data into a database. The code is set up to check if the data already exists, and if it does, prompt the user with a Bootstrap modal to confirm whether they want to continue adding the ...

jqueryajax

Choose a collection of elements and encase them within a <div> tag

I am currently working on creating a greasemonkey script for a webpage that has a rather challenging structure. My goal is to show and hide different entries, but the content is formatted like this: <a name="first"/> <h3>First</h3> Some ...

javascriptjquery

Struggling to display or transmit information from middleware in Node.js

I currently have an express server running on port 8082. When I access the route "/" as a GET request, it renders the index.html file. Then, I submit its form to "/" as a POST request using the app.js script. This route contains a middleware named "validat ...

javascriptjqueryexpresspostmiddleware

The sorting feature is not performing as anticipated

I'm dealing with an array of objects fetched from the backend. When mapping and sorting the data in ascending and descending order upon clicking a button, I encountered some issues with the onSort function. The problem lies in the handling of uppercas ...

javascripttypescript

Adjust the formatDate function in the Material UI datepicker

I recently implemented the material-ui datepicker component with redux form and it's been working great. However, I have encountered a minor issue. Whenever I change the date, it displays in the input field as yyyy-mm-dd format. I would like it to app ...

javascriptreactjsdatedatepickermaterial-ui

Utilizing the LinkedIn API: Posting a network update using a variable value

Currently, I have a string variable and I am looking to post the value stored in this variable as a network update on LinkedIn. Could someone please provide guidance on how I can modify the code below to make this functionality possible? updateURL = "/pe ...

javascriptajaxjquerylinkedin-api

Incorrect Results from Angular Code Coverage

Currently using Angular.js, Karma, Karma-coverage (Istanbul), and Jasmine for my stack. While conducting Code Coverage analysis on my app, I encountered an issue which leads to my question - Service A is showing up as covered by tests (in green) even thou ...

javascriptangularjsjasmineistanbulkarma-coverage

Issue with AngularJS compatibility on first generation iPad

Having trouble with my first generation iPad while trying to implement a basic ngRoute and ngAnimate setup. It's working fine on desktop and iPhone 6, but not on the iPad. The error message I'm encountering is: Error[$injector:modulerr]http://e ...

javascriptangularjsipad

having difficulty sorting items by tag groups in mongodb using $and and $in operators

I'm currently trying to execute this find() function: Item.find({'tags.id': { $and: [ { $in: [ '530f728706fa296e0a00000a', '5351d9df3412a38110000013' ] }, { $in: [ ...

javascriptnode.jsmongodb

Clearing a Vue.js filter: a step-by-step guide

Below is my Vue Js code where I have successfully implemented a filter to API array elements. However, I am facing an issue when trying to set up a button that clears the filter upon clicking, restoring the page to its original state without any changes. ...

javascriptvue.js