Step-by-step guide on replacing image and text simultaneously with a single click

I'm currently attempting to update both my text and image upon clicking (specifically on mobile), but unfortunately, I'm encountering an issue. While I've successfully managed to change the image using the function I created, the text remains unaffected. Would greatly appreciate any assistance with this matter. Please refer to the following live code for reference: https://codepen.io/oleanderek/pen/OdNzME

    document.querySelectorAll(".nav__label").forEach((el) => {
    el.addEventListener('click', changeArrow);
  el.addEventListener('click', changeText);
});

function changeArrow() {
    var arrow = this.getElementsByClassName('arrow')[0];

    if (arrow.classList.contains("down-arrow")) {
        arrow.classList.remove("down-arrow");
        arrow.classList.add("up-arrow");
    } else if (arrow.classList.contains("up-arrow")) {
        arrow.classList.remove("up-arrow");
        arrow.classList.add("down-arrow");
    }
}

function changeText() {
    var changeText = this.getElementsByClassName('showText')[0];

    if (changeText.classList.contains("showText")) {
        arrow.classList.remove("showText");
        arrow.classList.add("hideText");
    } else if (changeText.classList.contains("hideText")) {
        arrow.classList.remove("hideText");
        arrow.classList.add("showText");
    }
}
javascriptjqueryhtmlcssdropdown

Answer №1

If you remove the class for modification, the variable you declared will remain undefined. Therefore, it is important to establish a class that will remain constant. I introduced a new class called newClass and it worked perfectly.

HTML

 <p class="newClass showText">.</p>

Javascript

   document.querySelectorAll(".nav__label").forEach((el) => {
    el.addEventListener('click', changeArrow);
  el.addEventListener('click', changeText);
});

function changeArrow() {
    var arrow = this.getElementsByClassName('arrow')[0];

    if (arrow.classList.contains("down-arrow")) {
        arrow.classList.remove("down-arrow");
        arrow.classList.add("up-arrow");
    } else if (arrow.classList.contains("up-arrow")) {
        arrow.classList.remove("up-arrow");
        arrow.classList.add("down-arrow");
    }
}

function changeText() {
    var changeText = document.querySelector(".newClass");

    if (changeText.classList.contains("showText")) {
        changeText.classList.remove("showText");
        changeText.classList.add("hideText");
    } else if (changeText.classList.contains("hideText")) {
        changeText.classList.remove("hideText");
        changeText.classList.add("showText");
    }
}

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

Don't pay attention to the parent form tag in Bootstrap

Here is the code snippet I am working with: <div class="row"> <form id="update"> <div class="col-md-6"> <h1>Title</h1> </div> </form> <form id="insert"> <div class="col-md-6"> &l ...

htmlbootstrap-4

The Material UI dialog is causing issues for CKEditor 4

In the midst of my React project, I have incorporated CKEditor 4 into a Material UI dialog. However, when attempting to utilize advanced features like Math, I encounter an issue where I am unable to input any text into input or textarea fields. Despite sea ...

javascriptreactjsckeditormaterial-ui

Display flex causing Mui LinearProgress Bar to disappear

Looking for a way to create a unique bullet graph using material UI? How about two MuiLinearProgress bars placed side by side with a vertical Divider in between them. Struggling to get them displayed next to each other? <div className={classes.bulletGra ...

cssreactjsflexboxmaterial-uiprogress-bar

Leveraging JavaScript to format an HTML string

Is there a way to format an HTML string similar to how it's done in an HTML editor like Netbeans with Alt-Shift-F? I'm looking for a JavaScript function or library that can achieve this. Any suggestions? ...

javascripthtmlformatting

Resolve Bootstrap columns with varying heights

My Bootstrap row contains a variable number of columns determined by a CMS, sometimes exceeding the space available on one line. I am looking for a way to neatly display all the columns with equal heights. <div class='row'> <div cl ...

jquerycsstwitter-bootstrapresponsive-design

Vue.js causing issues with jQuery data table

Utilizing jQuery data-table within Vue.js in a laravel project has presented an issue for me. Although the data loads successfully into the data-table, there seems to be a problem with retrieving the data after it has been loaded. Specifically, the first r ...

javascriptvue.jsdatatables

Unexpected strings added to files using jQuery Upload File Plugin, caused by WebKitFormBoundary

I'm currently utilizing a plug-in found at My purpose for using this plug-in is to send files to a WCF Rest Service and save them onto the hard drive. The upload process seems to work fine, however, there is an issue with images, executables, etc. a ...

jquerywcf-restjquery-upload-file-plugin

What is the best way to pass an object into a method within a select element using Vue

Kindly review the following code snippet. <tr> <td>Select Timeslot</td> <td colspan="2"> <select class="form-control" v-on:change="onTimeSlotClick"> <option v-for="slot of slots"> <l ...

javascriptlaravelvue.js

Incorporate Javascript to smoothly transition a div into view, display it for a specified duration, gradually fade it out, and ultimately delete

I am excited to experiment with toast notifications by creating them dynamically. Each toast has a unique id number and I increment a counter every time a new one is created. The current functionality includes the toast sliding down, staying visible for 3 ...

javascriptjqueryhtmlcss

Is there a way to invoke a method within a hyperlink?

I have a method that needs to be called in a vue.js file: par() { this.jsontocsv++ } However, I am attempting to call it using a <li> tag, but I am unsure of how to do so. <li> <a v-on:click="par" href="#"> Example 1</a></ ...

htmlvue.js

Styling tables with borders in CSS

If a table is set to have a border at a high level, how can I ensure that classes inheriting from it do not have any borders set? table,td,th { border: 1px solid #0B6121; } How can I make sure that my other table has no borders at all? table.menu { ...

css

Move the perspective of Google Maps to a new location with

As a web designer working on my new portfolio site, I've encountered a challenge. I'm using Gowalla's API to display my latest checked-in spots on a Google map. However, I'm facing an issue where I want the map to pan to a specific loca ...

jquerygoogle-maps

Attempting to extract a parameter from a URL and pass it as an argument to a function for the purpose of locating objects based on

I am trying to retrieve data from a URL http://localhost:3000/share/user=sampleuser to display objects with an author value that matches the one in the URL. However, I encountered an error when attempting to call a function that extracts the value from t ...

javascripthtmlnode.jsmustache

The navigation bar is not showing up at the top of my webpage as expected, instead, it is displaying

1 I attempted to build a model Google site to enhance my HTML and CSS skills, but I encountered an unusual issue where my navigation menu is showing up inside my image div, even though it was created before that. I have given backgrounds to the navs and i ...

htmlcss

Struggling to properly align the div in the center

I encountered a frustrating issue where I couldn't properly center the divs on my webpage. The specific challenge I faced was trying to center a div within another div. Despite numerous failed attempts and extensive research, I eventually found a solu ...

htmlcss

Managing state with Apollo within a component

Greetings and thank you for taking the time to help me out. I am currently diving into the world of Apollo and React, but it seems like I am struggling with some logic here. On my main page index.js, I have initialized Apollo in the following way: export c ...

javascriptreactjsstatenext.jsapollo

The Vuetify data-table header array is having trouble accepting empty child associations

My Vuetify data-table relies on a localAuthority prop from a rails backend. Everything runs smoothly until an empty child association (nested attribute) is passed, specifically 'county': <script> import axios from "axios"; exp ...

javascriptarraysruby-on-railsvue.jsvuetify.js

Calculating the 3D Longitude and Latitude coordinates in a THREE.js globe using the radius along with the x and y values

Currently, I am exploring a Codepen where JSON data is being utilized to feed into a JavaScript application that maps coordinates using x and y values. Rather than utilizing longitude and latitude to map a location like Hong Kong, the developer uses these ...

javascriptnode.jsmaththree.js

Using JavaScript to generate a <style> element and accessing the cssRules

After spending countless hours trying to solve this problem, I'm hoping that my question isn't too foolish. This is a continuation of a previous question about creating a style tag with JavaScript on Stack Overflow. The solutions provided by Tom ...

htmlcssgoogle-chromesafaristylesheet

The onChange method in React is failing to execute within the component

I am having trouble overriding the onChange method in a component. It seems like the method is not triggering on any DOM events such as onChange, onClick, or onDblClick. Below are the snippets of code where the component is rendered and the component itsel ...

javascriptreactjscodemirrorreact-codemirror