What is the best way to reveal a concealed paragraph upon clicking a button?

<div class="inf-frame-text">
<h4> Explore Tomorrow </h4>
<p> At our agency, we believe in embracing the future as an endless journey. It's not just about what's coming next, but it's about everything that lies ahead. The upcoming experiences and innovations are what drive us forward. For our clients, the road to the future is a continuum of possibilities waiting to be explored. </p>
<a class="inf-read-btn"> Read More + </a>
</div>

        .inf-frame-text {
            margin-top: 120px;
            &:first-child {
                margin-top: 0;
            }
            p {
                height: 62px;
                overflow: hidden;
                transition:height 0.3s ease-out;
            }
            p.is-active {
                height: 100%;
                overflow: visible;
                transition:height 0.3s ease-out;
            }
        .inf-read-btn {
            display: block;
            color:#00ffbf !important; 
            cursor: pointer;
        }

      $('.inf-read-btn').on('click', function() {
        $('.inf-frame-text p').toggleClass('is-active');
      });

Hi everyone! I'm looking to set up some grids with dynamic content sections. Certain parts of the content should be initially hidden, and clicking on the "read more" button should reveal all content with a smooth toggle effect. I've attempted to implement some JavaScript for this functionality, but I'm encountering some issues. Additionally, I want to ensure that when a button is clicked, only the related content is shown while hiding all other sections.

javascripthtmlcssanimation

Answer №1

One potential reason for the issue could be an incomplete closure of the .inf-frame-text style. A closing brace seems to be missing.

.inf-frame-text {
   margin-top: 120px;

   &:first-child {
      margin-top: 0;
   }


$('.inf-read-btn').on('click', function() {
  // Locate the container clicked by its button
  var $container = $(this).closest('.inf-frame-text');
  // Find the paragraph inside it
  var $elem = $container.find('p');
  
  // Toggle the visibility of the paragraph element in that container
  $elem.toggleClass('is-active');
  
  $('.inf-frame-text p').not($elem).removeClass('is-active');
});
.wrapper {
  display: flex;
  flex: 1 0 auto;
}

.inf-frame-text {
  margin-top: 120px;
  &:first-child {
    margin-top: 0;
  }
}

p {
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.3s ease-out;
}

p.is-active {
  opacity: 1;
  overflow: visible;
}

.inf-read-btn {
  display: block;
  color: #00ffbf !important;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="wrapper">
  <div class="inf-frame-text">
    <h4> Learning Plus </h4>
    <p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply
      everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. </p>
    <a class="inf-read-btn"> Read More + </a>
  </div>
  <div class="inf-frame-text">
    <h4> Learning Plus </h4>
    <p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply
      everything</p>
    <a class="inf-read-btn"> Read More + </a>
  </div>
  <div class="inf-frame-text">
    <h4> Learning Plus </h4>
    <p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next in it's simply everything that's next. The next experience. The next innovation. </p>
    <a class="inf-read-btn"> Read More + </a>
  </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 deal with empty arrays during serialization of modified form elements only?

Managing a form with numerous multi-select fields can be challenging, especially when dealing with paged ajax. With each select having a unique ID and named accordingly as values[foobar1][], values[foobar2][], values[foobar3][], and so on, it's crucia ...

javascriptphpjqueryarraysajax

Accessing a subcollection with DocumentSnapshot in Firebase using JS9

Just had a quick question. Is anyone familiar with how to achieve something similar using Firebase JavaScript v9? Essentially, I have a `userDoc` that is a DocumentSnapshot and I need to access a sub-collection with the document snapshot. Here's the c ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

npm unable to retrieve Meteor package

When I attempted to install meteorite using nodejs v0.10.22 and npm v1.3.14, the installation failed with the following error: $ npm install meteorite npm http GET https://registry.npmjs.org/meteorite npm http 304 https://registry.npmjs.org/meteorite npm ...

javascriptnode.jsnpmmeteorite

Tips for setting a default value in an input type file using JavaScript

While trying to upload a file from my local system to the server, I encountered an issue where the local path was not being set in the input type file field. As a result, I am unable to successfully upload the file. I would greatly appreciate any assistan ...

javajavascriptjspjquery

Encountered a problem loading resources - code 500 malfunction detected

I am encountering an issue where I consistently receive a 500 Internal Server Error message in the developer console for all CSS, image, and JS files: Failed to load resource: the server responded with a status of 500 (Internal Server Error) Despite doub ...

htmlasp.netasp.net-mvcasp.net-mvc-3asp.net-mvc-4

Icon not displaying in Firebase background service worker notifications with JavaScript

Although my firebase-messaging-sw.js is functioning properly in displaying background notifications, I have encountered an issue where the icon does not show up even though notification.title and notification.click_action are working correctly. Here is th ...

javascriptfirebasefirebase-cloud-messagingiis-8service-worker

Can you clarify the sequence in which MutationRecords are delivered to MutationObservers?

The code from react-measure makes use of the latest MutationObservers found in modern browsers. According to MSDN: Furthermore, mutation observers are designed to accumulate multiple changes before alerting your observer. They group mutation records tog ...

javascriptreactjsmutation-observers

What is an alternative way to display static images in Rails 5 without relying on the Asset Pipeline?

I developed a web-based application with the backend built on Rails 5. Utilizing AngularJS for the frontend, I opted to not use the Asset Pipeline to deliver static content. Instead, I loaded all my scripts (JS & CSS) in the index.html file located within ...

javascriptruby-on-railsangularjsruby-on-rails-5

Exploring methods to trace the factory's property that is receiving updates from another factory within AngularJS

Hey there, I'm new to Angularjs and I have a bunch of factories in my application. The situation is, let's say we have obj1 in factoryA. Whenever I console.log(obj1), it displays numerous properties associated with it. This object is being update ...

javascriptangularjs

Once I press the button to switch all the other buttons to dark mode, it only successfully changes them once

I created a button that switches the entire page to dark mode. I also have some dark buttons that I want to switch to light when the dark mode button is clicked. The issue is that while changing the page to dark mode works, the dark buttons only toggle ...

javascripthtmlcssdom-eventsdarkmode

Using Array.splice() reveals a plethora of information

I'm facing an issue with the splice function. Here is my code snippet: const findMissingLetter=(array)=>{ let result, alphabet = "abcdefghijklmnopqrstuvwxyz"; if(array[0]===array[0].toUpperCase()) alphabet = alphabet.toUpperCase(); let start ...

javascriptarraysarray-splice

Divide a JSON dataset into two distinct JSON files and incorporate them within the code

My JSON file structure is as follows: { "rID": "1", "rFI": "01", "rTN": "0011", "rAN": "11", "sID&quo ...

javascriptjqueryjsonvue.jsvuejs2

Incorporating React into a non-React website

I am currently working on a project where the server renders all views using the Twig template engine. Therefore, I tend to write all my scripts within the .twig templates. Take, for instance, the aside-buttons.twig template: <div class="aside-butto ...

javascriptreactjstwig

Tips for ensuring the footer always stays at the bottom of the page

I'm having an issue with keeping the footer pinned to the bottom of the page. I haven't applied any specific styles to the footer, just placed it at the end of the content. Everything looks great until there's a page with minimal content, ca ...

javascripthtmlcssbootstrap-4footer

How to style Angular Material Dropdowns: Trimming the Left and Right Sides using CSS

Seeking to customize Angular Material Select to resemble a basic dropdown. Even after applying the disableOptionCentering, the dropdown list options still expand from the left and right sides (refer to Current picture below). The desired look would involve ...

cssangulartypescriptangular-materialangular7

Looking for assistance in implementing Chart.js within a modal popup

Here's a Chart-generated diagram: <div class="diagram"> <canvas id="pie" class="chart chart-pie" width="150" height="150" data="ModalObj.FunctionalTest" labels="labels" colours="Colours"> </canvas> This is a directive: .directive( ...

javascriptangularjstwitter-bootstrapcharts

Achieving Proper Alignment of Dropdown Menu in CSS

Currently, I am tackling the challenge of creating a responsive navigation bar. Despite my numerous attempts to troubleshoot, I am struggling to find a solution. My current issues are as follows: 1) On wide screens, I aim to center the dropdown menu benea ...

htmlcssdropdownnavigationbar

Updating a nested object element inside an array in Vuex state with Vue.js does not reflect the changes in the component's DOM

Vuex/store : import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { todos: [ {id: 1, text: 'Wash dishes', done: false}, {id: 2, text: ' ...

javascriptvue.jsvuejs2vue-componentvuex

Using jQuery, extract the input value and verify its accuracy. If correct, display the number of accurately predicted results

I am attempting to extract the value from an input field and validate if the answer is accurate. Rather than simply indicating correctness, I aim to analyze and display the number of correct responses alongside incorrect ones. Encountering difficulties wit ...

javascriptjqueryhtml

Utilizing $.getJSON to initiate a selection change event

I'm currently working on implementing a feature that involves adding categories to a dropdown list using jQuery Ajax. The goal is to load subcategories when a particular option is selected. However, I've encountered an issue where the addition o ...

javascriptjquery