how to change the class of a div when clicking on a <p> element

Check out this code snippet:

<p class="faq" onclick="toggleVisibility('answer1');">
  How can I restrict email sending on my website?
</p>



<div id="answer1" class="hide"><sometext></div>
these are my CSS styles!

.faq{
padding: 0px 16px 0px 0px;
background-repeat: no-repeat;
background-image: url(miniic_li.png);
background-position: right 5px;
}
.hide{
display:none;
}
.show{
font-family:Tahoma, Geneva, sans-serif;
margin-right:25px;
}

This code is functioning perfectly.

Once a user clicks the <p>, the visibility of the <div> changes to show the content. However, I also want the <div> to hide when the same <p> is clicked again. What should I modify in the code?

jqueryhtmlcssclass

Answer №1

Here is an alternative approach:

<p class="faqsli" onclick="document.getElementById('faqs1').className='faqsanswer';">

Mere mention of the ID of the div will not provide a reference to that specific div. You should utilize document.getElementById() to access the desired div and modify its className.

If you are utilizing jQuery, consider the following method:

UPDATE: Handling dynamic div and p

HTML

<p class="faqsli" data-div="faqs1">
    <!-- insert text here -->
</p>

<div id="faqs1" class="faqshide">
    <!-- additional text here -->
</div>

JS

$( document ).ready( function () {

    $( document ).on( 'click', '.faqsli', function () {

        var id = $( this ).attr( 'data-div' );
        $( '#' + id ).toggle();

    } );

} );

Answer №2

Implement the toggleClass method for toggling on click.

<p class="expandable" onclick="$('#content1').toggleClass('hidden show');">
  How can I limit email submissions on my website?
</p>

view demo

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

Animating multiple elements in Angular 2 using a single function

Currently, I am delving into Angular and faced a challenge while attempting to create a toggle categories menu. Within my navbar component, I have an animation trigger set up as follows: trigger('slideCategory', [ state('opened&apo ...

htmlangulartypescriptevent-handlingfrontend

Steps for recreating a Jquery Mobile form element with the same name after destroying it

As I delve into Jquery Mobile, I encounter a scenario where I must dynamically generate form fields (select, input, etc) using the following approach: $fieldInput = $('<input type="text" name="' + fieldName + '" />'); Initially, ...

javascriptjqueryjquery-mobile

Utilizing jQuery for smooth window scroll snapping

I am currently working on creating a page with panels that span 100% of the width and height. <body> <div class="panel"> </div> <div class="panel"> </div> <div class="panel"> </div> </body> The ...

jqueryscrollmousewheel

What is the best way to activate CSS filters on VueJS once the project has been compiled?

While working on a Node server locally, my SVG filter functions properly. However, once I build the project and run it on a server, the filter stops working. This VueJS project is utilizing Webpack as its build tool. The process of building the app invol ...

javascriptcsssvgvue.jsfilter

serving JSON and HTML responses using a PHP script

After searching through the questions here, I couldn't find a solution. As someone new to PHP and jQuery, I appreciate your patience as I explain my issue. My goal is to send an ajax request using jQuery to a script that runs a mysql query on data fr ...

phpjqueryhtmljson

Is there a way to customize flexigrid's grid contents by passing extra values with jQuery?

My current challenge involves passing timestamp range values along with the regular flexigrid values (page, qtype, query, rp, sortname, sortorder) via JSON to a servlet. I need to include startTime and stopTime with String values like "09/12/2013 16:03" in ...

jqueryjsonservletsflexigrid

Chrome fails to halt debugger at breakpoints located within JQuery event handler functions

It has come to my attention that breakpoints within JQuery event handler functions are not being activated. Interestingly, when I add an alert or a debugger;, the breakpoints work perfectly. I am perplexed as to whether this is a known issue with Chrome o ...

jquerygoogle-chromedebuggingbreakpointsjavascript-debugger

How can I use query to swap out elements within a div when clicked?

I have a project with two separate div classes named demo-heart and demo-coal. The goal is to implement functionality that allows the user to click on the fa-heart icon and have it switch to fa-coal, and vice versa when clicking on fa-coal. <div class ...

javascriptjquery

The enigma of Python's Magic Method Augmented Assignment

I'm currently working on a straightforward angle object that deals with integer values recurring when they exceed 360 (returning to 0) or drop below 0 (returning to 360). Despite having all the necessary magic methods for augmented assignment, somethi ...

pythonclassmethods

Obtaining JSON values by key name using JQuery

I am trying to extract JSON data using an HTML attribute How can I retrieve JSON values based on the translate attribute and "ed" key? JSON FILE { "open" : [ { "en": "Open", "ed": "Opened ...

javascriptjqueryjson

Adjust the text according to the selected checkbox option

I am attempting to update the displayed text based on whether a checkbox is currently checked or not. The value of the viewable text should reflect the user's selection. I believe I am close, but the functionality is not working as expected. <html ...

javascriptjqueryajax

I need help figuring out how to retrieve the full path of an uploaded file in JavaScript. Currently, it only returns "c:fakepath" but I need

Is there a way to obtain the complete file path of an uploaded file in javascript? Currently, it only shows c:\fakepath. The file path is being directly sent to the controller through jquery, and I need the full path for my servlet. Are there any alte ...

javajavascriptjquery

Tips for incorporating basic code into an android app

I find myself puzzled about the placement of regular Java code in an Android application. Using the Eclipse SDK, when you create an application, it automatically generates a .java file with an OnCreate() method. Should I insert my code within this method? ...

javaandroidhtmloncreate

What is the best way to implement the popover function for multiple elements using jQuery in Bootstrap 5

I am facing an issue with Bootstrap5 popover and jQuery where I keep getting an error message that says: Uncaught TypeError: POPOVER: Option "content" provided type "undefined" but expected type "(null|string|element|function)" ...

jquerybootstrap-5

Guide to implementing an AJAX loader during page load in PHP

Can anyone assist me in creating a page loader for when the page is loading? I am working on implementing a PayPal payment system. I have noticed that some pages display a loader (ajax loader) while directing to the PayPal gateway. I also want to add an ...

phpjqueryajax

The Font Awesome icons do not display offline

I'm having trouble using Font Awesome icons offline on my webpage. I've included the necessary code, but for some reason it's not working. Here is what I have: <html> <head> <title>font-awesome example</title> ...

htmlcssfont-awesome

`The Best Times to Utilize Various Image Formats Within a Single Webpage`

If I have two identical images displayed on a page at different sizes, what is the best option for optimizing performance? On one hand, using an image already sized correctly can improve performance, especially on mobile devices. On the other hand, using t ...

htmlimageperformance

Steps to Retrieve a Textbox Value Using Jquery/JavaScript When the ID is Dynamically Generated Depending on a Condition

Struggling with a jQuery function to retrieve the value of a text box upon clicking a button in multiple rows. Can't seem to get it to work, any suggestions? Thanks in Advance. Text-box Code:- $('input.R_Insert').click(function() { var ...

jqueryasp.net

ISO 8 takes a different approach by disregarding the meta viewport tag and autonomously adjusts the website layout to

<meta name="viewport" content="width=device-width,initial-scale=0"> I am facing an issue with my code not running on iPhone 6 and causing a problem with the responsiveness of my site. Any suggestions on what steps I should take? The site is constru ...

cssiphonehtmltwitter-bootstrapiso

Adjust the HTML code using jQuery and display it in a textbox

I have a piece of HTML code: <ul> <li class="1"><a>Option #1</a></li> <li class="2"><a>Option #2</a></li> </ul> <textarea>Display the updated HTML code here</textarea> The ...

jquery