Designing an accordion with the main content peeking out slightly before collapsing into place

Seeking assistance in creating an accordion that displays a snippet of content before collapsing.

I'm facing difficulty starting this project. While a basic accordion is simple to implement, I am unsure how to show a portion of the content (such as the first 30 characters) in a greyed-out format before collapsing the accordion.

My initial approach was inspired by a suggested structure with a "teaser" from this post. The goal is to have the teaser show a few initial characters from the content and disappear once the accordion is collapsed, revealing the full content.

If you have any insights or guidance on achieving this, it would be greatly appreciated.

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion"
           href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Why a rose is what you need
        </a>
      </h4>
    </div>
    <div class="panel-teaser panel-body" style="color:#d9d9d9" >
   A rose is the ideal flower you need because...
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" 
         role="tabpanel" aria-labelledby="headingOne">

      <div class="panel-body">
    A rose is the ideal flower you need because it's the flower all girls love to get. Offer one for Valentine's Day and she'll be yours blablabla
      </div>
    </div>
  </div>
</div>
javascripthtmlcssbootstrap-4accordion

Answer №1

Utilizing your code as inspiration, I crafted a straightforward example using JavaScript to toggle between displaying and hiding content. I devised a function that leverages the IDs of elements to select them and toggle a hide class. This function is then applied to your a element.

var toggleContent = function() {
  var panelData = document.getElementById("content-body");
  panelData.classList.toggle("hidden");

  var panelInfo = document.getElementById("content-head");
  panelInfo.classList.toggle("hidden");
}
.hidden {
  display: none;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" onclick="toggleContent()" aria-expanded="true" aria-controls="collapseOne">
          The Benefits of Roses
        </a>
      </h4>
    </div>
    <div id="content-head" class="panel-teaser panel-body" style="color:#d9d9d9">
      Roses are beneficial because...
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

      <div id="content-body" class="panel-body hidden">
        Roses are ideal because they are universally loved. Giving one on Valentine's Day can win someone's heart.
      </div>
    </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

Using Styled Components to achieve full width for input tag in relation to its parent

I am working with an input field that has a specific width set. My goal is to increase the width of this input field to 100% by selecting it from its parent component. Is there a way to achieve this without passing an explicit width prop in the styled c ...

javascripthtmlcssreactjsstyled-components

What is the best way to submit form data along with an image using Angular?

Recently, I built an application where users can submit form data along with an uploaded image. Since I am new to Angular, I am facing some challenges in merging the user-submitted data model and the image upload using the FormData method. Can anyone guide ...

javascriptangularangularjs

Generate a single-page PDF document mirroring the content of a website

I'm facing a dilemma. I need to generate a one-page PDF file without any gaps between the pages. Despite trying numerous plugins, add-ons, scripts, and software, all of them produce multiple pages. What I really require is to have all the pages in a s ...

phphtmlweb-services

Platform error: Responses not specified for DIALOGFLOW_CONSOLE

I've been struggling with this issue for almost a day now and I'm at a loss for what else to try. For some reason, Dialogflow Fulfillment in Dialogflow ES is refusing to make any HTTP calls. Every time I attempt, I receive the same error message ...

javascriptnode.jsaxiosdialogflow-es

Vue JS TypeScript component is unable to locate injected instance properties

Currently, I'm utilizing typescript alongside vue in my project. Within the app structure, there exists a service that acts as a global entity for all sub-components. I stumbled upon this native solution provided by Vue JS, which facilitates injecti ...

javascripttypescriptvue.jsvuejs2

Obtaining data from event listener during interval execution

I recently developed a countdown timer using JavaScript and included an event listener for a stop button to pause the timer When I stopped the timer, every second was being logged individually but I wanted to only retrieve the final time value. For exampl ...

javascript

Testing Jasmine, Karma, and Angular to create a controller

Can someone help me with identifying where I went wrong? How do I obtain an instance of a controller in Jasmine + Angular? What should I use to resolve this issue? 'use strict'; angular.module('myApp.contact', ['ui.router']) ...

javascriptangularjsjasminekarma-jasmine

pandoc encountered an error (67) while attempting to convert the document

I am working with R version 3.3.2 and Rstudio Version 1.0.44, and this is the structure of my RMarkdown file --- title: "Sentiment Analysis" output: rmdformats::material: highlight: kate --- When attempting to knit the file, I encountered the fol ...

htmlrrstudior-markdownpandoc

What is the location where Three.js establishes the default shaders for materials?

I've been attempting to locate the exact location where the fragment and vertex shaders are being assigned after creating a Three.js material, but haven't had much success. Using the ParticleSystemMaterial, I have material = new THREE.ParticleSy ...

javascriptthree.jsshader

What is the reason for Vue.js failing to refresh the DOM when utilizing the datepicker feature with Moment.js

Currently, I am working on a basic datepicker control in vue.js, utilizing moment.js for managing the date formatting and manipulation. The issue that I'm encountering is that despite modifying the date instance within the component upon clicking eit ...

javascriptvue.js

Is there a method for eliminating divs that have scrolled out of view on a never-ending webpage in order to prevent lag?

Looking for a solution to remove divs that have been scrolled past in Chrome in order to improve speed on an endlessly scrolling page. The sluggishness is making the page unusable. ...

javascriptgoogle-chrome

Understanding JSON Parsing in Jade

I am facing a challenge with handling a large array of objects that I am passing through express into a Jade template. The structure of the data looks similar to this: [{ big object }, { big object }, { big object }, ...] To pass it into the Jade templat ...

javascriptjsonnode.jsexpresspug

Display the item with jQuery once the CSS generated by jQuery has finished loading

Is it possible to delay the visibility of an object until my script finishes loading? I tried using ajaxcomplete() and ajaxSuccess() without success. Check out the code snippet below for an example. There's an image with the id: imagefocus. Whenever ...

jquerycssajax

Tips on using a dropdown menu to choose an item and automatically navigate to its specific details within an Angular framework

Here is the structure of my data : groups: [ { collections:[] }, { collections:[] }] I am utilizing nested *ngFor to showcase all groups and collections on a single page, which can make the list lengthy as more groups and collections are added. The hea ...

javascriptangulardomscrollngfor

React fails to acknowledge union types

I have the following types defined: export enum LayersItemOptionsEnum { OPERATOR, HEADER, } type sharedTypes = { children: string | ReactElement; }; type LayersItemStatic = sharedTypes & { label: string; option: LayersItemOptionsEnum; }; t ...

javascriptreactjstypescripttypesdiscriminated-union

Replace the content within the iFrame completely

Is it possible to have a textarea where I can input HTML code and see a live preview of the webpage in an iframe as I type? For example, here is the code I'd like to write in the textarea: <!DOCTYPE html> <html> <head> ...

javascriptjqueryhtmliframe

Guide on setting up haproxy as a reverse proxy for socket.io with SSL to avoid mixed content warnings

Over time, I've incorporated this configuration to integrate haproxy with node.js and socket.io. Highlighted sections from the haproxy setup: frontend wwws bind 0.0.0.0:443 ssl crt /etc/haproxy/ovee.pem timeout client 1h default_backend ...

javascriptnode.jssocketssslhaproxy

HighCharts velocity gauge inquiry

I recently integrated a highcharts speedometer with PHP and MYSQL on my website. Everything seemed to be working smoothly until I added the JavaScript code for the speedometer, causing it not to display. There are no error messages, just a blank screen whe ...

javascriptphpjquerymysqlhighcharts

The combination of Nest, Fastify, Fastify-next, and TypeOrm is unable to locate the next() function

In my attempt to set up Nest with Fastify and Next using the fastify-next plugin, everything went smoothly until I added TypeOrm for MongoDB integration. Upon loading the AppModule, Nest throws an error indicating that the .next() function cannot be found ...

javascriptnext.jsnestjstypeormfastify

Tips for aligning content in the Login Screen of Framework7?

I've been working on a cross-platform mobile application with Framework7. For the login screen, I followed a tutorial from https://www.tutorialspoint.com/framework7/login_screen_start_app.htm Here is the code snippet of my index.html with the login m ...

htmlcsscordovahtml-framework-7