Upgrading to Bootstrap 5 and customizing the collapse button text upon click

I've spent a lot of time searching for a solution to my problem, but all the advice I found is for bootstrap 3 and 4, not version 5.

Below is the code I am currently using:

<div class="p-3">9 Members Online
  <a class="p-1 btn btn-info" data-bs-toggle="collapse" id="toggle" href="#hiddenContent" role="button" aria-expanded="false" aria-controls="collapseExample">Show</a>
</div>

<div class="collapse" id="hiddenContent">
  <div class="card card-body bg-transparent">
    Member 1. <br><br> Member 2.<br><br> Member 3.<br><br> Member 4.<br><br> Member 5.<br><br> Member 6.<br><br> Member 7.<br><br> Member 8.<br><br> Member 9.<br><br>
  </div>
</div>

My goal is to change the text "Show" to say "Hide" when clicked on.

javascripttwitter-bootstrapbootstrap-5

Answer №1

Are you looking to achieve this? Simply hit the "Run Code Snippet" button and test if it functions as intended.

function changeVisibility() {
  var element = document.getElementById("toggle");
  if (element.innerHTML === "Show") {
    element.innerHTML = "Hide";
  } else {
    element.innerHTML = "Show";
  }
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1815150e090e081b0a3a4f544b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c7a5a8a8b3b4b3b5a6b787f2e9f6e9f7">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>

<a onclick="changeVisibility()" class="p-1 btn btn-info" data-bs-toggle="collapse" id="toggle" href="#hiddenContent" role="button" aria-expanded="false" aria-controls="collapseExample">Show</a>

           <div class="collapse" id="hiddenContent">
               <div class="card card-body bg-transparent">
                       Member 1. <br><br>
                   Member 2.<br><br>
                   Member 3.<br><br>
                   Member 4.<br><br>
                   Member 5.<br><br>
                   Member 6.<br><br>
                   Member 7.<br><br>
                   Member 8.<br><br>
                   Member 9.<br><br>
               </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

Utilizing Backbone script for fetching data from an external JSON source

I am seeking assistance on how to utilize a Backbone script to display data from a JSON file. Here is the structure of the HTML Page: <!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <title>Insert title here</tit ...

javascriptjqueryjsonbackbone.js

Having trouble dynamically displaying the '<' symbol using JavaScript?

Whenever I attempt to show a string with the character '<' in it, the part of the string that comes after the symbol is not displayed. Strangely enough, when I output it to the console, it appears correctly. Take a look at this excerpt showcas ...

javascripthtml

The element you are trying to interact with is currently not visible, therefore it cannot be accessed

Currently, I am working on a small Test Automation project using C# with Selenium WebDriver. I have run into an issue where some WebElements are not visible or have their 'Displayed' property set to 'false'. This prevents me from perfor ...

javascriptc#selenium-webdriver

Do class bindings with variables need to be inline when using Vue 3?

Consider the following HTML: <template v-for="(child, index) in group"> <div :class="{'border-pink-700 bg-gray-100 ': selected === child.id}"> <div>Container Content</div> </div> & ...

javascriptcssvue.jsvue-componentvuejs3

Ways to create a Google OAuth button with a personalized touch

I currently have a Google OAuth button that is implemented using the npm package @react-oauth/google. The button functionality is working fine, however, an issue arises when a user is already logged into their Google account in the browser and then views t ...

javascriptnode.jsreactjsnext.jsgoogle-oauth

Employing selenium.isElementPresent in Selenium 1 does not have the capability to identify an element that is dynamically added to the Document Object Model (

After trying out various locators, I have yet to find one that can detect an element that was added to the DOM. Below is my latest attempt at solving this issue: selenium.fireEvent("//button[2]", "click"); waitUntil(new Condition() { @Override pu ...

javascriptjqueryselenium

Unwrapping React: Mastering the Art of Prop Extraction and Sharing

Imagine I have 2 input elements below, both with the same props except for the className <ReactCardFlip> <input type="text" maxLength={1} className={inputStyles.input} defaultValue={value} ...

javascriptreactjs

Leverage both props and destructuring in your Typescript + React projects for maximum efficiency!

Is it possible to use both destructuring and props in React? For instance, can I have specific inputs like name and age that are directly accessed through destructuring, while also accessing additional inputs via props? Example The desired outcome would ...

javascriptreactjstypescriptdestructuring

What are the risks associated with allowing user-generated HTML or Javascript code on a website?

Is it really dangerous to allow users to edit HTML with Jinja2 templates and access some server-side variables that will be rendered later? I know Google uses Caja Compiler to sanitize and sandbox HTML served from Google Apps Script. Should I be concerned ...

javascripthtmlsecuritysandboxjinja2

Creating separate versions (development and production) of JavaScript code: a step-by-step guide

I have been working on a small web application that is distributed in a Docker container, using an nginx image. This application consists of plain html and js code, without any frameworks. Within the JS code, there is access to a remote host via WebSocket ...

javascriptnginxdocker

Creating Dynamic Divs in ASP.NET

Attempting to dynamically create a Div by clicking a button has been a challenge for me. I found a helpful link here: After referring to the link, I created the following code on the server side (.cs page): public static int i = 0; protected void Bu ...

c#javascriptasp.net

Encountering an issue while updating information following the migration to vue-chartjs 4

I recently upgraded from vue-chartjs version 3 to version 4. I successfully migrated my LineChart component by updating the template section and removing the draw method calls. This component is utilized for two separate charts. However, when I close the ...

javascriptvue.jschart.jsvue-chartjs

Update background to full screen and include text when hovering over DIV

Currently, I am utilizing Bootstrap and have a layout with 6 columns containing icons/text within. I desire to implement a hover effect where each column triggers a background change in transition for the entire section. In addition, text and button elemen ...

javascriptjquerycsstwitter-bootstrap

When using AngularJS services to pass data, the data may be lost when the page is refreshed

I'm facing an issue with transferring data from controller A to controller B using a Factory (or a Service) when the user refreshes the browser. I am able to successfully set the data in controller A and retrieve it in controller B, but upon refreshin ...

javascriptangularjs

IntelliJ does not support the use of newlines within Vue.js component templates

While working with Vue.js in IntelliJ IDEA, I encountered a small problem related to defining component templates. The issue is that IntelliJ seems to struggle when the template spans more than one line and attempts to concatenate them together. For examp ...

javascriptintellij-ideavue.jswebstorm

Is it possible to view the frames/packets being transmitted from an EJS or HTML form to the Express backend using Express Js?

My current computer science assignment involves visually representing the data transfer process between a frontend and backend. I don't need to show the full data, just the flow of chunks and how it navigates through protocols. Could someone please g ...

javascriptnode.jsformsexpressejs

Angular alert: The configuration object used to initialize Webpack does not conform to the API schema

Recently encountered an error with angular 7 that started popping up today. Unsure of what's causing it. Attempted to update, remove, and reinstall all packages but still unable to resolve the issue. Error: Invalid configuration object. Webpack ini ...

javascriptangularwebpackrxjs

Choosing the primary camera on a web application with multiple rear cameras using WebRTC

Having a bit of trouble developing a web app that can capture images from the browser's back camera. The challenge lies in identifying which camera is the main one in a multi-camera setup. The issue we're running into is that each manufacturer u ...

javascriptandroidtypescriptwebrtcgetusermedia

Traverse Through Nested JSON Data and Display it in an HTML Table using Vue

Struggling to find a way to loop through my data, I have JSON data presented like this: [ { "STATUS":"CUTTING INHOUSE", "STID":"1", "CATS":[ { "CAT":"ORIGINALS ", "ARTS":[ { "ARTNO":"GY8252", ...

javascripthtmlvue.js

Developing an object that displays animated effects when modifying its properties, such as visibility, and more

Exploring the realm of animations in JavaScript and AngularJS has led me to the idea of creating a unique JavaScript object. Imagine having the ability to define an object where setting an attribute like obj.visible = true Would automatically make the ...

javascripthtmlcssangularjsionic-framework