What is the best way to toggle the visibility of an element when clicked?

Is jquery the right choice for me? I am looking to toggle the visibility of the p element when clicking on the faq-q class. How does this functionality actually work?
Here is a visual representation: https://i.sstatic.net/n0GR1.png


html

https://i.sstatic.net/TAKVA.png
css

.faq {
    flex-direction: column;
    margin-top: 1.5rem;
    display: flex;
}

.faq-item {
    box-shadow: 0 0 1.25rem rgb(0 0 0 / 8%);
    border-radius: 0.3125rem;
    background: #e3eaf4;
    margin-top: 1.25rem;
}

.faq-q {
    padding: 0 3.125rem 0 2.5rem;
    font-size: 1rem;
    align-items: center;
    color: #000;
    height: 5rem;
    margin-bottom: 0;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.faq-ans {
    padding: 0 2.5rem 2.5rem;
}
jquerycss

Answer №1

Would it be advisable to utilize jQuery? I'm interested in toggling the visibility of a paragraph element when I click on a specific class called faq-q.

For such a straightforward task, jQuery might not be necessary. Utilizing simple querySelectorAll() and addEventListener() methods should suffice.

document.querySelectorAll(".faq-q").forEach(el => {
  el.addEventListener("click", (e) => {
    el.parentElement.querySelector('.faq-ans > p').style.display =
      el.parentElement.querySelector('.faq-ans > p').style.display == "none" ? "block" : "none";
  })
});
<div class="faq">
  <div class="faq-iten is-active">
    <h5 class="faq-q">When was the company founded?<i class="fa-solid fa-chevron-down"></i></h5>
    <div class="faq-ans">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugiat porro ipsam delectus, blanditiis expedita cupiditate.</p>
    </div>
  </div>
</div>

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

Is there a way to customize the input field selection color to a darker shade of blue using CSS?

Can the default dark blue selection color of an input be customized using CSS? I have tried the following options, but they do not affect the text selection within a text field or drop-down: ::selection ::-moz-selection ::-webkit-selection ...

htmlcss

How to submit a form using jQuery/AJAX/PHP without refreshing the page, but struggling to extract the form values for email submission

I need help with creating a form that submits a tracking number using jquery and php without refreshing the page. I have managed to send an email upon form submission, but I can't figure out how to include the form information in the email body ($emai ...

phpjqueryajaxforms

Unique Selector Customization

Is there a way to style all custom elements in CSS? I am looking to make custom elements default to block display (as most browsers render them inline by default) and then adjust as needed. A potential rule I have in mind is: *::custom { display: blo ...

htmlcsscss-selectorscustom-element

Experiencing problems with the CSS on the Login page and have yet to find a solution

Description:- I encountered an issue with my HTML login page where I used an image for the username and password. Everything worked fine when I manually typed in the username and password, but when I selected the username from the auto-fill suggestions pop ...

htmlcss

Responsive carousel with multiple items

I am in the process of developing a website that requires the implementation of a carousel feature. Since the website is based on AngularJS, I initially considered using Angular's Bootstrap Carousel. However, I encountered an issue where this carousel ...

javascriptcssangularjsangular-ui-bootstrap

Prevent multiple sliding menu animations - .stop()

I'm encountering a problem with my sliding menu (3 levels). When I quickly move the mouse over the menu, it ends up sliding up and down multiple times. I've heard that using the jQuery function .stop() can fix this issue, but I'm not sure h ...

jquery

Does IE 9 support Display Tag?

Although this may not be directly related to programming, I have been unable to locate any information regarding the compatibility of IE 9 or even 8 with the Display Tag Library. The documentation is silent on the matter. If anyone has encountered any cha ...

htmlcssinternet-explorer-8internet-explorer-9displaytag

Managing images in JavaScript while conserving memory

Welcome I am embarking on a project to construct a webpage using HTML, CSS, JavaScript (jQuery), and nearly 1000 images. The length of the HTML page is substantial, around 5000px. My vision involves creating a captivating visual experience for users as t ...

javascriptjqueryhtmlcssoptimization

Adjust the hue as you scroll

I've been searching for a solution to this issue, but I haven't been able to make it work. My goal is to have the page header change from a transparent background to a red background as the user starts scrolling down the page. $(window).on("s ...

javascripthtmlcss

Verify if the radio element is marked as selected in the AJAX reply

My ajax response contains two radio elements and I need to check if they are checked in the response. I've tried using the code below to check the radio status but it's not working: $('#input[type=radio]').each(function(){ alert($( ...

javascriptjqueryajaxresponse

Having difficulty retrieving AJAX POST data

I'm attempting to generate a calendar using php but I'm having trouble figuring out how to update the displayed month using ajax Within my code, I have two buttons inside a 'button' tag with values of "+1" and "-1" respectively, both w ...

javascriptphpjqueryajaxpost

Implementing Ajax validation in Wordpress

Looking for guidance on implementing ajax validation in a Wordpress plugin? I'm currently working on one that allows users to submit posts from the frontend and have successfully added a validation method. How can I integrate ajax validation into my e ...

phpjqueryajaxwordpress

The process of retrieving data from a dropdown list and populating checkboxes using Ajax/Jquery

I'm looking for a way to dynamically retrieve data in checkboxes based on a selected user from a dropdown list. The dropdown list contains users, and the checkboxes display pages data. Assuming we have a table called user with columns user_id and use ...

phpajaxjquerycheckbox

Calling MVC controllers using Ajax requests

Looking for some help with passing data through an ajax call to a c# mvc controller. Despite the seemingly simple task, I'm having trouble getting the controller to read the data sent via the ajax call.... Here's the code snippet from my MVC con ...

c#jqueryajaxasp.net-mvc

How to traverse up to the parent element using XPath in nightwatch

Here is the structure I am dealing with: <div class="class"> <h4 class="class2"> "Condition" </h4> <div class = "click_class">Click_text </div> </div> I need to click on the element with class ="click ...

cssxpathautomated-testsnightwatch.js

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

There are 12 image icons displayed in a row within div elements using display: inline-block. However, when the browser window is resized, I would like the icons to be arranged on two or more rows so that each row contains an equal number of icons. ...

jquerycssresponsive-design

How can I retrieve the attribute of the parent or highest level < li > when I am deeply nested within a nested unordered list in jQuery?

I'm trying to navigate up the tree menu of a nested unordered list to the topmost <li> and retrieve the "p_node" attribute using jQuery's toggle function. For example, when I click on "Annie", I want to get the root <li>, which is "mC ...

jqueryjquery-selectorshtml-lists

When JQuery's .each() Method Falls Short in Modifying the Classes of Chosen Elements

While loop through a group of HTML elements passed to a function, I am attempting to assign a class to specific elements based on a condition. However, after assigning the class, it seems like the content that is returned remains unchanged. I suspect there ...

jqueryeach

Any tips on customizing the appearance of HTML5 input element dropdown menus?

Is there a way to customize the appearance of the HTML5 email input element? Are there any CSS selectors that can be used for styling this particular form field? ...

htmlcss

Don't forget to preserve the hover state of divs even after refreshing

I recently added a navigation bar that expands in width upon hovering over it. For an illustration, check out this example: http://jsfiddle.net/Gsj27/822/ However, I encountered an issue when clicking on a button within the hover effect area. After load ...

javascripthtmlcss