Click to expand for answers to commonly asked questions

Having trouble setting up a FAQs page on my blog and can't seem to get the code right. Check out what I'm trying to do here: http://jsfiddle.net/qwL33/

Everything seems fine but when I click on the first question, both questions open up. Can someone assist me with this issue?

Here is the code snippet:

    $('#slidetoggle')
      .on('click', function(e) {
        jQuery('.slider').toggle('slideDown');
      });
<div id="slidetoggle">HELLO 1</div>
<div class="slider" style="display: none">Hello there!</div>

<div id="slidetoggle">HELLO 2</div>
<div class="slider" style="display: none">Hello there!</div>

javascripttoggleslidedowntoggleclass

Answer №1

It's not the most optimal solution, but the issue lies in duplicating the same ID (slidetoggle). I have added a function with an appended 2 to the ID and updated the functionality accordingly. You can check out the updated code snippet in this fiddle https://jsfiddle.net/sw5ohfqv/ A better approach would involve creating a function that closes all currently visible elements before opening the clicked one.

   $('#slidetoggle2')
.on('click', function(e){
    var $this = $(this),
        $slider = $('.slider'),
        isOpened = $slider.is(':visible');

    if (isOpened)
    {
        $slider.slideUp();
        $this.text('show fields');
    }
    else
    {
        $slider.slideDown();
        $this.text('hide fields');
    }
});

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

JavaScript - Attempting to insert a value into a text field by clicking a button

I am struggling to get my function to properly add the value of the button to the text field when clicked by the user. HTML <form name="testing" action="test.php" method="get">Chords: <textarea name="field"& ...

javascripthtml

The networking feature stops functioning on Android devices after upgrading from Ionic 1.5.0 to 1.6.3

After upgrading from ionic 1.5.0 to 1.6.3 (the latest version), I noticed that networking ajax calls were no longer working on Android. I had to remove and re-add the android platform, and there seemed to be a change in the apk names from MainActivity-debu ...

javascriptandroidajaxrestionic-framework

Transform the HTML content into a JSON format file

I'm currently developing an online marketplace and trying to convert all product information like name, price, and description into json format. I have a sample code featuring a selection of products displayed in rows. <div class='cakes'& ...

javascripthtmlcssjsone-commerce

Exploring the dynamic JSON object from D3 in a Rails view

Currently, I am in the process of learning D3 and my initial attempt involves showcasing a graph where I manually hard-code the json data. To demonstrate this, I have put together a JSFiddle which you can view here: http://jsfiddle.net/Nu95q/1/ The JSFid ...

javascriptruby-on-railsjsond3.jscoffeescript

Just a quick inquiry regarding adding new line characters in JSON to be used in

After encountering an issue with a JSON file in my JavaScript application where it would not print new lines when viewed on the console, I am at a loss for a solution. The contents of my JSON file are as follows: [ { "id": "71046" ...

javascriptjson

What is the best way to handle form data for JSON manipulation in jQuery?

var checkedValues = $('.required:checked').map(function () { return this.value; }).get(); var arr = new Array(10); alert(checkedValues); alert("number of values in it " +checkedValu ...

javascriptjqueryjsonforms

Display error page when unable to load ng-view template

Is there a way to display a standard error page or template if a certain template cannot be loaded using ngRoute in Angular? I've come across suggestions that subscribing to the $routeChangeError event might help, but I'm not sure what steps to ...

javascriptangularjsngroute

Having trouble adjusting the label fontSize in ReactJS when using semantic-ui-react?

Is there a way to decrease the size of the label for a form input? In this scenario, attempting to set the fontSize does not work: <Form.Input label="Username" style={{fontSize: '10px'}} /> Does anyone have any suggestions on how to res ...

javascriptreactjssemantic-ui-react

Utilizing jQuery to send an Ajax GET request for a JSON file

Recently I have begun delving into the world of jQuery and Ajax, attempting to utilize both technologies to retrieve a JSON FILE. Below is the structure of the file: [ { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": f ...

javascriptjqueryjsonajax

Angular-datatables has a scroller function that allows for easy navigation within the content of

I've been scouring the web for hours, but I can't seem to find a solution. Can someone please assist me in resolving this issue? Issue: I integrated angular-datatables within an md-tab using Angular material. Everything was running smoothly unti ...

javascriptangularjsscrollangular-materialangular-datatables

What is preventing Node.js from executing my JavaScript code in the terminal?

I need help understanding why my JavaScript code isn't working properly. Can someone explain the Uncaught SyntaxError: Unexpected Identifier error message? ...

javascriptnode.jsvisual-studio-code

Is Ember CLI experiencing issues due to the latest Ember Data update?

Greetings! I am a beginner with Ember and recently encountered some warnings after upgrading to the latest version of Ember Data: Update: I have two identical versions of my app, one built without ember-cli and the other with ember cli. Both applications ...

javascriptember.jsember-datafirebaseember-cli

Executing various count() queries on a MongoDB using mongoose

Hey there, I consider myself a MongoNoob and I know this question has probably been asked before in various ways, but I haven't found a specific solution yet. Let's imagine I have two Moongoose Models set up like this: var pollSchema = mongoose. ...

javascriptnode.jsmongodbmongoose

Can general principles be applied to determine which script is the most efficient and will load the quickest?

Is there a way to determine which script is optimal and will load faster when there are multiple ways to write scripts that achieve the same outcome? ...

javascriptjqueryperformance

What is the significance of the "component" prop within MUI components?

I am a beginner in React and HTML. Currently, I am using MUI and React to create my own website. I am currently attempting to add an "Upload button" that will allow me to select an image file when clicked. Below is the official implementation: <Button ...

javascripthtmlreactjsmaterial-uifrontend

Discover past stock prices on Yahoo Finance

I'm stuck on tweaking a functioning jfiddle example that I have. Can anyone help me with this two-part question regarding the jfiddle: http://jsfiddle.net/maxmillien/qPVSy/ Part 1) Is there a way to clear the search each time a new search is performe ...

javascriptjqueryjsonyqlyahoo-finance

Storing an Excel file with JavaScript: A comprehensive guide

I've been struggling to save an Excel file using Javascript, but I'm facing compatibility issues with different browsers. I initially tried using BASE64 along with data URL, which worked well in Chrome and Firefox but failed in IE and Safari. ne ...

javascriptangularjsexcelpdf

The processing indicator fails to function properly when trying to refresh a jQuery datatable

I am currently customizing the loading indicator for the datatable using a spinner called startLoadGlobal(SPINNER_DATA_TABLE_FINANCEIRO_CARREGAR_REGISTROS) in jQuery. It works correctly when I initially load the datatable, however, when I reload it, the sp ...

javascripthtmljqueryjquery-uidatatables

jQuery DataTables covering a CSS-anchored menu bar

My webpage has a pinned navigation menu bar at the top and some tables with interactive features using jQuery's DataTables. However, after implementing jQuery, I encountered an issue where the tables cover the menu when scrolling down, making it uncli ...

javascriptjqueryhtmlcssdatatable

Having trouble with my ReactJS application where click interactions are functioning properly on the header but not on my content

Objective: Implement an iframe displaying a YouTube video with play/pause functionality for users. Issue: Unable to interact with main content, but works correctly when placed in Navigation or Footer components. Attempted Solutions: Explored various de ...

javascripthtmlcssreactjs