Include text for both the button label before and after a bootstrap toggle button

Is there a way to change the button label on a bootstrap toggle switch/button before and after clicking it without using jquery or javascript? It seems like there should be a feature in bootstrap for this.

Initially, the label reads: Show list

After clicking, the label should display as: Hide list

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4e2c21213a3d3a3c2f3e0e7b607e607c">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container d-flex mb-4 p-4"> 
        <div class="btn-1 m-2"> 
            <input type="checkbox" class="btn-check" 
                id="btn-check" autocomplete="off"> 
            <label class="btn btn-primary" for="btn-check"> 
                Show list 
            </label> 
        </div>

cssbootstrap-5

Answer №1

Here is the CSS implementation:

/* Conceal the original text */

.toggle-label {
  position: relative;
  color: transparent !important;
}


/* Design a pseudo-element to show the text */

.toggle-label::after {
  content: attr(data-off);
  color: white;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 88px;
}

/* Modify the content based on checkbox state */

#btn-check:checked+.toggle-label::after {
  content: attr(data-on);
}

.btn-primary {
  max-width: 88px;
  width: 100%;
  height: 38px;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7d5d8d8c3c4c3c5d6c7f78299879985">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container d-flex mb-4 p-4">
  <div class="btn-1 m-2">
    <input type="checkbox" class="btn-check" id="btn-check" autocomplete="off">
    <label class="btn btn-primary toggle-label" data-on="Hide list" data-off="Show list" for="btn-check"> 
          Show list
        </label>
  </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

What is the best way to make a vertical line using the CSS code provided in the link?

Check out this cool horizontal line design I found on stackoverflow: Click here for CSS code to create the line I really like the look of the line. Here's how I implemented it on my website: hr.fancy-line { border: 0; height: 5px; } hr ...

javascriptjqueryhtmlcss

What is the best way to display the user login in the center of a page with all necessary controls

Challenge How can the user login be displayed in the center of the page? Additional Information The current layout displays user login data on the left-hand side. I am looking to have the user login data centralized on the page, which includes labels f ...

csshtmlasp.net-mvc-4bootstrap-4bootstrap-ui

Steer your keyboard attention towards the parent element that embodies a list

My implementation focuses on making drop down menus accessible via keyboard input using HTML/CSS and JS/jQuery events. The goal of keyboard accessibility includes: Tab key to navigate the menu elements. Pressing the down arrow key opens a focused menu. ...

javascriptjqueryhtmlcssaccessibility

Creating a New Section in your HTML Table

Can a page break be implemented in an HTML table? I've attempted to add page breaks to the following HTML: <html> <title>testfile</title> <meta http-equiv="expires" content="0" /> <meta http-equiv="cache-contr ...

htmlcss

Interactive tables created using Google Visualization

I have a Google visualization data table that works well, but I am facing an issue with the width of the table. When I click as shown in the image, I call the function drawTable(); and then I encounter this: As you can see, the table does not have a width ...

javascriptjqueryhtmlcssgoogle-visualization

JavaScript preloader function isn't functioning properly when paired with a button

I'm currently working on developing a preliminary landing page for my game using JavaScript. I have integrated a class that overlays my main content, and added an 'onclick' function named fadeOut() for my button in JavaScript. However, the f ...

javascripthtmlcss

Using HTML and CSS to capture user input data and store it in an array

I've created a form that allows users to add and remove multiple fields, ranging from one to three. My goal is to retrieve the form data and store it in an array. index.html <!DOCTYPE html> <html lang="en"> <head> ...

javascripthtmlcss

Using the <blink> tag on Internet Explorer

Unfortunately, Internet Explorer does not support the <blink> tag or the text-decoration:blink; style in CSS. Are there any alternative methods for creating blinking text in IE? ...

htmlcssinternet-explorer

How can you alternate a button's text using jQuery?

Seeking advice on jQuery and Javascript: Take a look at this HTML snippet: <div class="quandoo-widget" id="quandoo-booking-widget"></div> <script src="https://booking-widget.quandoo.com/index.js" data-merchant-id="48554" data-theme="dark"& ...

jqueryhtmlcss

showing information on webpage 2 received via query parameters from webpage 1

Hello, I am trying to input text into a textarea and then send the data through a query string to another webpage. My goal is to display the data on the second webpage. I have written the following code, but it doesn't seem to be working. I've ch ...

javascripthtmljquerycssquery-string

The div containing the background image does not resize properly when using media queries

page in question. I am currently working on a chess board project where each cell is represented by a div element. My goal is to make the board expand beyond certain minimum widths using media queries, but for some reason, this functionality is not working ...

htmlcssangularjsmedia-queries

Is there a quick way to import all available font weights from a Google font?

I am looking to experiment with importing all weights and styles of a Google font, such as Roboto or Roboto Slab, in a CSS file. Is there a more efficient way to do this rather than listing out each individual style in the @import? ...

cssgoogle-fonts

Tips for aligning the elements in the navigation bar in the center

I am faced with a dilemma regarding my navbar design. Here is an image of my current navbar layout: I am attempting to align the components within the navbar to resemble the following design: Here is the HTML code I am using: <!-- Navbar --> < ...

htmlcsslaravelbootstrap-4navbar

Using base64 encoding for font-face with alternative fallbacks

After reading this article, I am interested in incorporating a font face in the following way: @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); src: url('webfont.eot?#iefix') format('embedded-openty ...

css

What is the best way to eliminate all borders from a select box?

Is there a way to completely remove all borders from the selectbox using either CSS or JQuery? The code snippet is as follows: <select id="doctor_ch"> <option value="1" selected>One</option> <option value="2">Two</option& ...

jqueryhtmlcssdrop-down-menu

Troubleshooting a CSS overflow problem in the main slider

While exploring the website , I encountered a minor issue. When I added "overflow: hidden" to the featured slider div, the images appeared stacked if JavaScript was enabled or the user's internet connection was slow. However, a new problem has arisen ...

htmlcssoverflow

jQuery UI Datepicker Display Issue

I'm encountering an issue with a jQuery UI Datepicker object that is supposed to appear when I click inside a textbox. Below is the HTML code: <tr> <td class="label-td"><label for="dateOpen_add">Date Opened</label></td& ...

jqueryhtmlcssjquery-uiuidatepicker

How can CSS be utilized to style the visited links that are hovered over

Is there a way to change the font color specifically for visited hyperlinks that are being hovered over by the mouse? I am trying to achieve this: a:visited:hover {color: red} ...

htmlcssstylesheet

Challenges with Internal Styling on Wordpress Sites

Okay. I've been dealing with some internal style issues on my Wordpress website. After dedicating hours to trying to change styles for various elements, I realized that the main html file contained a bunch of internal style sheets that were overridin ...

htmlcsswordpresstemplates

What is the best method to insert multiple rows of the same height into a table cell in

My datatable is causing me trouble as I try to add more rows in the td after the Name column. The rows are not aligning properly, and I need a solution. I want these new rows to be aligned with each other, but the number of rows may vary based on user inp ...

htmlcsshtml-tabledatatable