Button displayed on complete Bootstrap 4.5 Card

When running the code below, the text "Click Me" appears when the mouse hovers over it.

I actually want "Click Me" to be displayed for the entire card (list).

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

<div class="container">
  <div class="card" style="width: 18rem;">
    <ul class="list-group list-group-flush">
      <a href="" class="btn btn-primary list-group-item">
        <li class="">Click Here</li>
      </a>
    </ul>
    <img src="" alt="Demo">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Know more about this feature</li>
    </ul>
    <div class="card-body">
      <p class="card-text">Detailed Explanation of this feature</p>
    </div>
  </div>
</div>

I would appreciate it if the card-body is only displayed when "Know more about this feature" is clicked.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

  1. To always display the text "Click Me", simply remove the list-group-item class from the <a> tag.

Replace

<a href="" class="btn btn-primary list-group-item">

With

<a href="" class="btn btn-primary">
  1. The card-body section is initially hidden but can be shown when the user clicks on "Know more about this feature". This behavior is controlled by jQuery code and a hide class. Refer to the code snippet below for implementation details.

$(document).ready(function() {
  $("li.list-group-item").click(function() {
    $("div.card-body").toggleClass("hide");
  });
});
.hide {
  display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" rel="stylesheet">

<div class="container">
  <div class="card" style="width: 18rem;">
    <ul class="list-group list-group-flush">
      <a href="" class="btn btn-primary ">
        <!-- Add in task icon -->
        <li class="">Click Here<span class="float-right"><i class="fas fa-tasks "></i></span></li>
      </a>
    </ul>
    <img src="" alt="Demo">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Know more about this feature</li>
    </ul>
    <div class="card-body hide">
      <p class="card-text">Detailed Explanation of this feature</p>
    </div>
  </div>
</div>

  1. Add the task icon next to "Click Here" to enhance the user experience.

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

Enclose a pair of divs within a fresh div wrapper for better organization

Imagine you have the following: <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv"></div> <div class="somediv" ...

jqueryhtml

Is there a way to effortlessly launch a new window with just a single click?

I'm encountering an issue with a function that is supposed to open a new window when a button is clicked. Strangely, on the first click, nothing happens, but on the second click, the window finally opens. Here's my code: Script <script src ...

javascriptjqueryhtmlhtml-tableclick

What is the best way to combine text from various group radio buttons?

Here is the JavaScript code I have written: $(function(){ $('input[type="radio"]').click(function(){ var txt = $(this).parent().text(); var $radio = $(this); if ($radio.data('waschecked') == true) { ...

javascriptjqueryhtml

Error encountered: $(...).pickadate is not defined as a function

I am currently working on a basic web project that involves a simple form where users enter their name, birthday, and university degree. I am utilizing Materialize and jQuery for this project. However, I have encountered a frustrating issue while trying to ...

jqueryhtmlmaterialize

jQuery validation for various forms with individual submission buttons

I am working on a single-page application that has multiple forms, such as form_1, form_2, etc., each with its own submit button (submit_1, submit_2, etc.). Each form contains records with checkboxes for taking specific actions and there is also a "select ...

jqueryhtml

Issue with div:after transition not functioning in Safari

The transition effect on div:after does not function properly in Safari. Below is the code for reference: HTML: .bbtn { width: 151px; height: 48px; background: #ef2e41; margin: auto; margin-top: 32px; -webkit-transition: all 0.3s ease-in-ou ...

htmlcss

Getting user input with JQuery and dynamically updating CSS properties

<img src="purplemoon.png" alt="Purple moon" id="moon-photo" /> <table> <tr> <th colspan="4">Control panel</th> </tr> <tr> <td> <!-- attempting to retrieve value from the input field ...

javascriptjqueryhtmlcss

Creating multiple unique custom attributes for a specialized HTML element

Creating getter/setter methods for a custom attribute on a custom HTML element is quite simple: customElements.define('custom-el', class extends HTMLElement { static get observedAttributes() { return ['customAttr'] ...

javascripthtmlecmascript-6web-componentcustom-tags

I want the name to be retained in storage to prevent the item from being mistakenly renamed when deleted based on its index

After pressing the "add layer" button in the box shadow generator, a new layer is added. For example, let's say I have added 3 layers (Layer 1, Layer 2, Layer 3) and then deleted Layer 2. After deletion, the remaining Layers are Layer 1 and Layer 3, b ...

javascripthtmlreactjs

Fixed-bottom footer in Bootstrap 5 that overlays content

Having trouble creating a fixed footer using the fixed-bottom class in react & bootstrap. The issue is that it's covering some content and I've tried various solutions without success. Any suggestions on how to fix this? (Code and Demo provided b ...

javascripthtmlreactjsfooterbootstrap-5

Having difficulty automatically populating a textarea with the chosen option from a datalist

Is there a way to automatically populate the Address field of a client in a textarea based on the input of the client's name in an input field? I have created a 'for loop' to retrieve a datalist of client names. For the address, I retrieved ...

javascriptphphtml

Issues with fonts in Google Chrome Version 32.0.1700.76 m

After recently updating my Google Chrome browser, I noticed that some of the fonts are not displaying correctly. Interestingly, they appear fine on other browsers, but the issue only seems to occur in Chrome v32.0.17...76 m. The fonts I used were "Open Sa ...

htmlcssgoogle-chromefontsgoogle-font-api

Events related to key press timing in HTML 5 canvas

Currently, I am developing a game similar to Stick Hero for Android using HTML5. I am working on the code that will capture the time of key press (specifically the right arrow key with ASCII 39) in JavaScript and expand a stick accordingly. <!doctype h ...

javascriptjqueryhtmlcanvasjquery-events

Custom background options for Wordpress developer

I have been exploring the WordPress codex to learn about incorporating custom background options, similar to this example $defaults = array( 'default-color' => '', 'default-image' => '&apo ...

phphtmlcsswordpresswordpress-theming

css background-size and image position not working

On my website, users/members can upload or link a custom image for the start page. This feature works well with modern browsers that support background-size in CSS. However, if the browser does not support css3 background-size, the image may not fill the e ...

htmlcss

Fluid imitation pillars with a decorative outer edge

Looking to create a modern, sleek 2-column HTML5 interface with a left sidebar and main content area on the right. Backwards compatibility is not an issue as all users will be using the latest versions of Chrome or FF. The goal is to give the sidebar a ba ...

htmlcss

Enhance your Magento store with a personalized layout update

Is there a way to call a stylesheet from my skin folder instead of pointing to my base path? Right now I have <reference name="head"> <action method="addCss"> <stylesheet>yourtheme/css/red.css</stylesheet> < ...

phphtmlcssmagento

Using a percentage width on a <div> element with the "overflow-x: scroll" property does not seem to be functioning properly, even when encapsulated within

My code includes a div within another div, taking up 50% of the page's width: <div id="mainContainer" class="mainContainer"> <div id="scroller" class="scrolling"> <!-- items here should make the div really long --> & ...

javascripthtmlcss

Scrolling up occurred upon opening the bootstrap modal

When a model is opened, the page automatically scrolls to the top and remains at the top when the model is closed. This HTML uses the Blade engine: <div class="row mt-0 name"> <a class="text-wrapper text-xs inviteeModel ...

htmlbootstrap-modallaravel-bladebootstrap-5

creating a table displaying data in a horizontal format sourced from ajax/json transformation

I am currently working on a piece of code that retrieves a list of IDs from local storage and compares them to IDs in a JSON file. If there is a match, the corresponding data is displayed in a table. However, I am facing an issue with my table layout as i ...

jqueryhtmlajax