What could be causing the show button to change its style every time I click it?

I'm a beginner in the world of JavaScript. I have been working on customizing the "show more" button and encountered an issue. I managed to add text and a down arrow below the button, but when I click it, another button labeled "I don't know how to style it" appears with hidden content. Then, upon clicking again, the original show more button reappears without any icon or styling.

function toggleText() {
  var showMoreText = document.getElementById("more");
  var buttonText = document.getElementById("moreButton");
  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "inline";
    buttonText.innerHTML = "Show More";
  } else {
    showMoreText.style.display = "inline";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
  }
}
.pink {
  color: #FF7B5F;
}

#more {
  display: none;
}

#moreButton {
  background-color: transparent;
  border-color: transparent;
}
<span id="startpoint"></span>
<span id="more">
    <div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
      <a href="#">
        <figure class="filter-container">
          <img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
          <figcaption class="product-desc"><p>text</p></figcaption>
          <figcaption class="product-desc2"><h4>text</h4></figcaption>
        </figure>
      </a>
    </div>
  </span>
<button onclick="toggleText()" id="moreButton">
    <p class="pink">Show More</p> 
    <img class="more" src="./images/downarrow" alt="arrow">
  </button>
javascriptcssbootstrap-5

Answer №1

You have overridden the p tag within the button. To correct this, use the following selector: 

var buttonText = document.querySelector("#moreButton p");
like so:

function toggleText() {
  var showMoreText = document.getElementById("more");  
  var buttonText = document.querySelector("#moreButton p");
  
  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "inline";
    buttonText.innerHTML = "Show More";    
    buttonText.classList.remove('green')
  } else {
    showMoreText.style.display = "inline";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
    buttonText.classList.add('green')
  }
}
.pink {
  color: #FF7B5F;
}

#more {
  display: none;
}

#moreButton {
  background-color: transparent;
  border-color: transparent;
}

.green {
  color: green;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f001f02">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<span id="startpoint"></span> 
<span id="more">
    <div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
      <a href="#">
        <figure class="filter-container">
          <img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
          <figcaption class="product-desc"><P>text</P></figcaption>
          <figcaption class="product-desc2"><h4>text</h4></figcaption>
        </figure>
      </a>
    </div>
  </span>
<button onclick="toggleText()" id="moreButton">
    <p class="pink">Show More</p> 
    <img class="more" src="./images/downarrow" alt="arrow">
  </button>

Answer №2

Please give it a shot. The code seems to be incorrect. You've nested a div inside a span.

function toggleText() {
  var showMoreText = document.getElementById("more");
  var buttonText = document.getElementById("moreButton");
  var arrowBtn = document.getElementById("arrowButton");
  
  if (startpoint.style.display === "none") {
    showMoreText.style.display = "none";
    startpoint.style.display = "inline";
    buttonText.innerHTML = "Show More";
    arrowBtn.style.display = "inline";
  } else {
    showMoreText.style.display = "inline";
    arrowBtn.style.display = "none";
    startpoint.style.display = "none";
    buttonText.innerHTML = "Show Less";
  }
}
.pink {
  color: #FF7B5F;
}

#more {
  display: none;
}

#moreButton {
  background-color: transparent;
  border-color: transparent;
  cursor: pointer
}
<span id="startpoint"></span>
<span id="more">
    <div class="clients BRANDING col-6 col-md-4 col-lg-3 col-lg-3">
      <a href="#">
        <figure class="filter-container">
          <img class="img-fluid brand-img" src="./images/filter/logo" alt="Logo">
          <figcaption class="product-desc"><P>text</P></figcaption>
          <figcaption class="product-desc2"><h4>text</h4></figcaption>
        </figure>
      </a>
    </div>
  </span>
<button onclick="toggleText()">
    <span class="pink" id="moreButton">Show More</span> 
    <img class="more" src="./images/downarrow" alt="arrow" id="arrowButton">
  </button>

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

Data retrieval error, function returned instead of expected value

Hey everyone, I'm currently working on fetching data using the GET method and I would like the data to be displayed after clicking a button, following standard CRUD operations. As a beginner in programming, I could use some help. Any assistance is gre ...

javascriptreactjseventsaxiosonclick

When I click the button, the page goes blank and keeps loading endlessly

http://jsfiddle.net/iansan5653/7EPjH/17/ <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type="text/javascript"> function chart() { var pressure; ...

javascripthtmlfunctiongoogle-visualization

Transform an Angular application built using the Meteor framework to an Express JS-Angular application

Is there an automated or minimalist way to transform an application with a meteor backend and angular frontend to use a backend in Express js and keep the frontend using vue js instead? I have not been able to find any resources or documentation that prov ...

javascriptangularexpressmeteorautomation

What's a quick way in Javascript to add a string to all elements in an array?

I'm working with an array = ["a", "b", "c"]; What I need to do is concatenate a string, let's say "Hello", to each value in this array. The desired output should look like this: ["Hello_a", "Hello_b", "Hello_c"] Is there a quicker way in java ...

javascriptarrays

Truncating text with ellipsis in CSS when wrapping on a nested div structure

Here is a 3-tier nested div tree structure with the outer node having a maximum width where I want the ellipsis wrapping to occur. I've almost achieved the desired result, but the issue arises when the inner nodes are not trimmed to accommodate as mu ...

htmlcssoverflowword-wrap

Is there a way to modify the color of ASCII art letters within HTML's <pre> tags?

For this illustration, I aim to transform the letter "y" into a shade of blue. ,ggggggggggggggg dP""""""88""""""" Yb,_ 88 `"" 88 88 88 gg gg 88 I8 8I gg, 88 ...

htmlcssasciiascii-art

How to align items at the center in material-ui styling

I have a row of cards inside a container that I want to align in the center with equal spacing around them. I am using the material-ui UI library for the layout. Despite adding the justifyContent: center property, the cards are not evenly spaced. This is ...

cssreactjsmaterial-ui

Using two distinct buttons to submit information using various methods

When button 1 is clicked, I want it to update the row. When button 2 is clicked, I want it to create another row. This is the controller code for updating: public function update(Request $request, $id){ $pay = Payroll::find($id); $pay ->idnumb ...

javascriptjquerylaravel

Using the float property in IE7 can cause a line break and may result in other divs being pushed down

Hey there, I've encountered a few issues with floats in IE multiple times. Here's an example to illustrate what I mean. Please note that this example functions properly in Firefox and Chrome. index.html <html> <link href="style.css" rel= ...

htmlcss

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

I'm attempting to scale my images precisely using CSS: HTML: <div id="thumbnail-container"> <img src="sample-pic.jpg"/> </div> CSS: #thumbnail-container img { max-height: 230px; max-width: 200px; } In this scenario, ...

javascripthtmlcssinternet-explorer

Steer clear of chaining multiple subscriptions in RXJS to improve code

I have some code that I am trying to optimize: someService.subscribeToChanges().subscribe(value => { const newValue = someArray.find(val => val.id === value.id) if (newValue) { if (value.status === 'someStatus') { ...

javascriptangulartypescriptrxjs

button that takes you back to the top of a mobile website

I want to customize the Scroll To Top button so that it only appears once the user begins scrolling down, rather than always being visible even when at the top of the page. Just a heads up, I don't have much experience with JavaScript, so I might need ...

javascriptjqueryhtmlcss

Creating a Nested DataTable: A Step-by-Step Guide

My data structure includes a nested dict presented as follows: var dataSet = [{"s_group": [{"range_name": null, "name": "XXXXXXXXXXXX"}], "configfile": "XXXXXXXXXXX", "src_port": ["0-65535"], ...

javascriptjquerydatatables

Adjusting the width of a select box to match the size of its child table using CSS

Within my Vue application, I've implemented a select box that contains a table component. When the select box is clicked, the table becomes visible in a container. However, I'm facing an issue where I can't dynamically adjust the width of th ...

javascripthtmlcssvue.js

Is there a way to customize the hover effect on this navigation link in Bootstrap that includes a span and an icon from Bootstrap?

<li class="nav-item mt-3"> <a href="#" class="nav-link px-2 d-flex justify-content-start align-items-center"> <i class="nav-icon bi bi-calculator-fill fs-4"></i> ...

htmlcssbootstrap-5

Display the Image Element in Angular only when the image actually exists

In my HTML code, I have two sibling elements - one is an image and the other is a div. I want to display the image element if the image exists, and show the div element if the image doesn't exist. Here's how my elements are structured: <img ...

javascripthtmlangularjsimage

<div class="firstHeaderClass"> What exactly is this?

Struggling to eliminate a recurring header across all my webpages for customization, I've hit a roadblock in identifying the source of this repeating header. Upon stumbling upon this code snippet in the header section, my efforts to decipher its ...

phphtmlcssheader-files

Construction of jQuery Events

I have experience working with jquery tools and recently started exploring the twitter bootstrap src. One interesting thing I've observed is the utilization of the $.Event constructor for event triggering. For example, in cases like the bootstrap mo ...

javascriptjqueryevents

When scrolling back to the top of the page, the data-spy feature does not re-highlight the "Home" anchor

After experimenting with Data-spy to change the active anchor while scrolling, I encountered an issue. Upon scrolling back up to the top of the page from the about section, the "Home" anchor failed to re-activate. How can this be fixed? I attempted to rem ...

javascripthtmlcsstwitter-bootstrapscroll

Shifting an image to the corner using HTML and CSS

As I work on designing a coming soon page, my goal is to have the voter's hand extend all the way to the edge of the screen by cutting off parts of the sleeve. Can you provide some guidance on what modifications are needed in the css/html code for thi ...

htmlcssimagebackground