Conceal and reveal content using the caret class

I want to create a feature where a portion of text is displayed from a description field, and then expand to show the full text when a caret icon is clicked.

This is my current implementation, which is very close to what I envision:

<div class="card-body">
  <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample" class="dropdown-toggle">
  </a>
  <div class="collapse" id="collapseExample">
    <p class="card-subtitle text-muted"><%= @foo[:description] %></p>
  </div>
  <p class="card-subtitle text-muted text-truncate"><%= @foo[:description] %></p>
</div>

Challenges I'm facing include:

  • Is it possible to make the caret rotate 90 degrees when toggling the content?
  • How can I hide the truncated text when displaying the full text?
  • Can the caret be positioned immediately to the left of the text rather than above it?
javascripttwitter-bootstrapbootstrap-4

Answer №1

After carefully considering...

  • Your html markup uses a card-body, however,
  • The main goal is to display the full card body text, without collapsing it, and since
  • It seems like carets are no longer part of BS4 as standalone helpers

Therefore

  • You may not necessarily need the collapse component since the intention is to keep the full card body text visible in a truncated form with ellipses at the end
  • As an alternative, a font awesome caret can be used instead of the deprecated BS4 caret
  • A combination of CSS and jQuery can be utilized to rotate the caret icon and reveal the complete card body text

Edit: animated flex

There could be several challenges when animating between the text-truncate classes.

The best solution I came across (credits to CSS-Tricks) involves animating a flex container. The article provides valuable insights, prompting me to revise my initial response.

I cannot guarantee how this approach will interact with BS4, but given that Cards are inherently flex-based...it might lead to interesting outcomes.

$(function() {
  $('a').click(function() {
    $(this).find('i.caret').toggleClass('cw-90');
    $('div.card-text.collapsible').toggleClass('collapsed');
  });

});
.fa-caret-right {
  transition: all 250ms;
}

.cw-90 {
  transform: rotate(90deg);
}

.card-body {
  display: inherit;
  justify-content: flex-start;
  flex-direction: inherit;
  height: 200px;
}

.collapsible {
  overflow: hidden;
  transition: flex 1s ease-out;
  height: auto;
  min-height: 1rem;
  box-sizing: content-box;
  flex: 1;
}

.collapsed {
  flex: 0;
}

.collapsible.collapsed p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collapsible:not(.collapsed) p {
  overflow: auto;
  text-overflow: auto;
  white-space: normal;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">

<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <a href="#" role="button">LinkButton<i class="ml-1 caret fas fa-caret-right"></i></a>
    <div class="card-text border rounded p-2 collapsible collapsed">
      <p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.</p>
    </div>

  </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

How can the entire menu be closed in Bootstrap 5 when clicking on a link or outside of the page?

I'm currently utilizing BootStrap 5 for constructing my webpage. Within my page, I have a NavBar Menu containing various links. <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__ ...

javascripthtmlcssbootstrap-5

Utilizing a variable name to specify an array or object for searching in Javascript and jQuery

Looking to improve my JavaScript skills as a beginner. I have a program that can randomly select an item from an object, but now I want it to pick another item from an object with the same name as the first selection. However, I'm struggling with usin ...

javascriptjqueryarraysobject

Customizing the title in Firebase-UI: Simple steps to override it

Currently, I am utilizing firebase with firebaseui to log into my React app. <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} /> However, I have encountered an issue where I am unable to override the default Title (Sign in with ...

javascriptreactjsfirebasefirebaseui

Absolute positioning of a div relative to its immediate parent element

Within my code, there are three nested div elements: <div id="div1"> <div id="div2"> // contains content <div id="div3"> // includes some content with a form </div> </div> </ ...

javascriptjqueryhtmlcss

Is Vue substituting the "el" component instead of rendering within it?

Have you noticed that when creating a Vue instance, the element specified by "el" gets replaced instead of rendering inside of it? If I use an id to reference the "el", everything works fine. For example, new Vue({el: "div#app", render: h => h("span", ...

javascripthtmlvue.jsweb

A guide on utilizing webpack devServer proxy within a create react app

Currently, I am in the process of developing a new application with create-react-app and I am looking to incorporate some proxies into my code. In the past, I utilized webpack's devServer for this purpose. module.exports = { ... devServer: { ...

javascriptreactjswebpackcreate-react-app

Proper method for refreshing React context

Currently, I am implementing Gatsby along with a layout plugin to maintain the persistence of my navbar while the content on the page below it changes. My main objective is to have animations run smoothly during page transitions without the navbar reloadin ...

javascriptreactjsgatsbyreact-context

Creating an HTML table with two arrays displayed and a delete button for confirming deletion

I have created a function to populate two arrays with movie information and display it in a table on the screen. However, I am struggling to make the delete button appear and to separate the titles and directors into different columns. How can I achieve ...

javascript

Determine who the creator of the clicked div is

I'm sorry if my explanation is a bit difficult to comprehend. Here is the code snippet in question: names.push(newName); var strName = newName; var newName = document.createElement('p') newName.setAttribute('id', newName); documen ...

javascriptjqueryhtmlcssarrays

The express gateway is unable to transfer multipart/formdata

I've implemented express gateway as my main service gateway. One of the services I have needs to update an image, and when I try to handle files independently using multer it works fine. However, once this service is routed through express gateway, th ...

javascriptnode.jsexpress-gateway

Issue occurs when a circle element is not following a div element on mouse

Currently, I have implemented some jQuery code that instructs a div named small-circle to track my cursor movement. I discovered how to accomplish this by referencing a thread on stack overflow. I made slight modifications to the script to suit my specifi ...

javascriptjqueryhtmlcss

What are the best methods for customizing the backgrounds of the form-floating input labels in the latest version of Bootstrap?

I'm currently using Bootstrap 5.3 and experimenting with the new "floating labels" feature. I want to add some extra styling to my input fields, like background colors. However, when I initially set a subtle green background color, it looks fine witho ...

csstwitter-bootstrapbootstrap-5

Using Angular $scope in web workers

What is the best way to access angular $scope data in Web Workers? I'm currently experimenting with using parallel.js library for this purpose. $scope.variant = 7; $scope.final = 0; var p = new Parallel([0, 1, 2, 3, 4, 5, 6]), log = function () { co ...

javascriptangularjsweb-worker

Tips for displaying a digital keyboard when a webpage loads on iOS Safari

While developing a website, I noticed that the virtual keyboard fails to appear when an input field gains focus during the page load process. As per Apple's policy restrictions, this functionality is not allowed. However, I am interested in finding a ...

javascripthtmlcssiosiphone

Dynamically delete a property from a JSON object

I am currently working on a task that involves removing properties from a JSON object. I need to create a system where I can specify an array of locations from which the fields should be redacted. The JSON request I am dealing with looks like this: { "nam ...

javascriptarraysjsonredaction

What steps should I take to generate a stylized date input in javascript?

Looking to dynamically create a date string in JavaScript with the following format: dd-MMM-yyyy Need the dd part to change between 1 and 29 each time I generate the variable within a loop Month (MMM) should be set as Jan ...

javascriptdate

The initial rendering of the NextJs 13 application is experiencing significant sluggishness when deployed on an EC2

After deploying my NextJS 13.4 app on an AWS EC2 instance with 2 GB of RAM, I noticed that the initial load time is quite slow, taking around 20 seconds to load for the first time. The development mode in NextJS builds and displays the result, which may co ...

javascriptreactjsamazon-ec2next.jsnext.js13

Creating a responsive ListView/DataView in BootstrapWould you like to know how to

I am in the process of creating my very first webshop. I have been trying to populate my webpage with all the products from my SQL database using a listview. However, I encountered an issue where the design is not responsive. My goal is to display the prod ...

c#asp.netbootstrap-4

Guide to testing error throwing in error events with Jest

I am having an issue with a particular learning case. The code snippet below is what I am dealing with and I aim to test error throwing: export const someFunction = async () => { //... const fileReadStream = createReadStream(absoluteFilePath) .on(&a ...

javascriptnode.jstypescriptts-jestbabel-jest

Object is not compliant with HTMLInputElement interface and cannot execute 'stepUp'

Currently, I am facing an issue with passing the selected value from a dropdown list of countries to a PHP file using AJAX. The goal is to take this value and then transfer it to another input field identified by the ID #tele. Here is the gist of my code: ...

javascriptjqueryajax