How to toggle a specific element in Bootstrap 4 with a single click, without affecting other elements

I've been struggling with a frustrating issue: I have 3 elements next to each other at the bottom of the fixed page. I tried using Bootstrap4 toggles to display only text when a user clicks on an image, but it ends up toggling all the images instead of just one. Despite several attempts, I haven't been able to solve this problem. If anyone knows the solution, please help! You can find the page here: www.ourway.pl.

 .carousel {
        margin-left: auto;
        margin-right: auto;
        width: 100vw;
        position: fixed;
        bottom: 10px;
    }
 .card-text {
        margin: 5px 5% ;
        text-align: justify;
        text-justify: auto;
        line-height: 25px;
    }
  .card-img-top {
        margin-left: auto;
        margin-right: auto;
        display: block;
        border-radius: 80px;
        border: 3px solid rgba(0, 0, 0, 0.4) ;
        text-align: center;
        align-content: center;
    }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/css/tether.min.css" rel="stylesheet"/>


    <section class="container-fluid p-0 topcard">
       <div class="row justify-content-center" >
       <!-- Carousel -->
          <div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="8000">
             <div class="carousel-inner" role="listbox">
              <div class="carousel-item active">
               <article class="col">
                <div class="card carousel-style">
                 <div class="card-block p-0">
                  <h2 class="card-title">Rumunia - Sinaia</h3>
                    <img class="card-img-top opacity" data-toggle="collapse" data-target="#demo" aria-expanded="false" aria-controls="collapseExample" src="/static/rumunia/woloszczyzna/sinaia/cover.jpg" alt="Card image cap" title="Click to expand description">
 

             <p class="card-text collapse" id="demo" >Today we invite you to the historical land of Woloszczyna, where the charming town of Sinaia lies at the foot of the Bucegi Mountains, which was favored by the royal couple who built their breathtaking summer residence Peleş here.</p>
            <a class="btn" href="/Romania/woloszczyzna/sinaia/story.html" title="Story">Story</a>
            <a class="btn" href="/Romania/romania-tips.html#Sinaia" title="Tips">Tips</a>
            <a class="btn" href="/Romania/woloszczyzna/sinaia/gallery.html" title="Gallery">Gallery</a>
             </div>
            </div>
           </article>

           <article class="col">
            <div class="card carousel-style">
             <div class="card-block p-0">
              <h2 class="card-title">Poland - Promnice and Surroundings</h3>
               <img class="card-img-top opacity" data-toggle="collapse" data-target="#demo2" aria-expanded="false" aria-controls="collapseExample" src="/static/poland/silesia/promnice/cover.jpg" alt="Card image cap" title="Click to expand description">
              <p class="card-text collapse" id="demo2">Today we invite you to Silesia, specifically in the vicinity of Promnice, where many attractions await you, such as palaces, castles, a picturesque path around the lake, bison reserve, open-air museum, or the opportunity to visit the Tyskie Brewery. </p>
              <a class="btn" href="/Poland/silesia/promnice/story.html" title="Story">Story</a>
             <a class="btn" href="/Poland/poland-tips.html#Silesia" title="Tips">Tips</a>
             <a class="btn" href="/Poland/silesia/promnice/gallery.html" title="Gallery">Gallery</a>
                 </div>
                </div>
               </article>

               <article class="col">
                <div class="card carousel-style">
                 <div class="card-block p-0">
                  <h2 class="card-title">Poland - Shelter at Kudłacze</h3>
                   <img class="card-img-top opacity" data-toggle="collapse" data-target="#demo3" aria-expanded="false" aria-controls="collapseExample"src="/static/poland/beskid-makowski/pcim-kudlacze/cover.jpg" alt="Card image cap" title="Click to expand description">
                  <p class="card-text collapse" id="demo3">If you're looking for a short afternoon trip near Krakow, we recommend the loop from Pcim through the shelter at Kudłaczach!</p>
                  <a class="btn" href="/Poland/BeskidMakowski/Pcim-Kudlacze/story.html" title="Story">Story</a>
                  <a class="btn" href="/Poland/poland-tips.html#BeskidMakowski" title="Tips">Tips</a>
   <a class="btn" href="/Poland/BeskidMakowski/Pcim-Kudlacze/gallery.html" title="Gallery">Gallery</a>
                   </div>
                  </div>
                 </article>
              </div>
            </div>
          </div>  
         </div>
        </section>

htmlcssbootstrap-4toggle

Answer №1

Appreciate the inclusion of the site! It really allowed me to experiment with some new tactics.

Here are a few CSS rules I would suggest adding:

header{
    z-index:1;
}

article.col{
    height:100vh;
}

.card.carousel-style{
    width: calc(100% - 30px);
    position: absolute;
    bottom: 0px;
}

If you'd like further clarification, let's break down the relevant structure:

<div class="carousel-item">
    <article class="col">
        <div class="card carousel-style"></div>
    </article>
    <article class="col">
        <div class="card carousel-style"></div>
    </article>
    <article class="col">
        <div class="card carousel-style"></div>
    </article>
</div>

In your design, the .carousel-item div adjusts its height based on the tallest child element (one of the .cards). Therefore, when a .card expands upon click, the .carousel-item increases in height as well. By default, all .cards are positioned at the top of their parent, causing them to move upward as the parent expands.

By implementing the aforementioned CSS rules, the .carousel-item will stretch to match the page's height, while each .card remains positioned at the bottom due to position: absolute and bottom: 0px. However, there was an issue with horizontal centering due to position: absolute, leading to the addition of width: calc(100% - 30px) to maintain center alignment within each article.col.

UPDATE:

Another consequence of the .carousel-item matching the page's height is that it obscures the navbar. To address this, ensure that your header stands out above the .carousel-item so users can still access it. Simply set the z-index of the .header to a value higher than 0, and it should resolve the issue.

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 process to transfer data from JavaScript to HTML within a Laravel environment?

I am attempting to transfer a value from JavaScript to HTML as a variable. In order to do this, I am retrieving the value from a Laravel PHP controller. JavaScript $("ul.nav-tabs > li > a").click(function() { var id = $(this).attr("href").repla ...

javascripthtmllaravel

How can I extract the "href" attribute from an anchor tag using XPath?

I am working with HTML code that looks like this: <a href="/images/big_1.jpg" class="class-a"> <img class="class-img" src="/images/small_1.jpg"/> <span class="class-span"> <img src="/images/img_1.png"> </ ...

htmlparsingxpath

Python Selenium- Extract and print text from a dynamic list within a scrolling dropdown element

I am currently working on a project using Selenium and Python to extract a list of company names from a dropdown menu on a javascript-driven webpage. I have successfully managed to reveal the list of company names by clicking the navigation button, and eve ...

javascriptjquerypythoncssselenium

Using the power of AJAX, retrieve data from a PHP script and showcase the response within

Within my HTML file, I have implemented a feature that allows users to input a value. To validate this input, I created a PHP script that checks if the entered value exists in the database. The script returns the following JSON response: {"active":true} ...

javascriptphpjqueryhtmlajax

Navigating within fixed-positioned divs

I'm attempting to create something similar to the layout seen on: The desired effect is to have fixed content on the right side, with only the left side scrolling up to a certain point before the entire page scrolls normally. However, in my implement ...

javascripthtmlcssscroll

How to retrieve a nested array element in JavaScript

Here is the Pastebin link of the index.html file for reference: http://pastebin.com/g8WpX6Wn (The file contains broken image links and no CSS styling). If you would like to access the entire project, you can download the zip file. I am currently working ...

javascriptjqueryhtmlarraysfor-loop

embedding a button alongside the pager in an HTML document

I am encountering an issue with the positioning of a button in my paginated table setup. The button is currently displaying below the pager instead of being aligned on the left side of the page along with the pager. https://i.stack.imgur.com/gUiB9.png To ...

javascripthtml

Build a bootstrap table with rounded corners

Currently, I am utilizing Bootstrap 5 and have the table code below: .reasonCode-table { padding: 8px; border-collapse: separate; } .reasonCode-table th { border: 2px solid #7a7878; padding: 8px; border-radius: 2px; border-collapse: collaps ...

htmlcssbootstrap-5

Can fputs() or fwrite() encode HTML special characters at times?

I have encountered an issue where I am outputting HTML content as a string to an HTML file, but some servers are encoding special characters (for example " becomes \&quot;). Even after using the htmlspecialcharacters_decode function, the problem p ...

phphtmlstringcharacter-encodinghtmlspecialchars

Retrieve the server code periodically and automatically refresh the form elements

Let's kick things off by explaining how the application functions: (please note there are multiple users on the page such as Patient M, Patient E, and so forth) 1) Check In: Next to Patient X's name, you will find a button labeled Check In. This ...

phpjavascriptjqueryhtmlajax

How to download and install Google Chrome Canary on your Android or iPhone device

I've been diving into a HTML 5 Web Audio Input project lately. I'm keen to test it out on my Android/iPhone devices, but after some research, I discovered that it only functions properly in Google Chrome Canary. The problem is, I can't seem ...

htmlgoogle-chrome

``Protect your PDF Document by Embedding it with the Option to Disable Printing, Saving, and

Currently, I am facing a challenge to enable users to view a PDF on a webpage without allowing them to download or print the document. Despite attempting different solutions like Iframe, embed, PDF security settings, and Adobe JavaScript, I have not been s ...

javascripthtmlpdfiframeembed

JavaScript xPath is ineffective at providing a return value

Trying to work through an issue with xPath and I am new to this concept. Any guidance or assistance in JavaScript would be greatly appreciated. Here is the simple HTML document that I have: <!DOCTYPE html> <html> <head> < ...

javascripthtmlxpath

Reorganize Material UI Grid Items with varying lengths

I'm currently working with a Material UI grid system that appears as shown below: <> <Typography gutterBottom variant='h6'> Add New User{' '} </Typography> <Grid container spacing={3} ...

javascriptcssreactjsmaterial-ui

Accessibility - Tabs count not being recognized by screen readers

I am facing an issue with making Bootstrap tabs accessible for screen readers. Ideally, the tabs should be read as tab 1 of 1, tab 2 of 2, etc. However, with Bootstrap tabs, all items are read as tab 1 of 1. When I assign the role="tab" to the li items, th ...

bootstrap-4accessibilityuiaccessibilitynvda

Encountering an issue when running the command "ng new my-app" after updating the @angular/cli package

npm version 7.5.4 has been detected, but the Angular CLI currently requires npm version 6 to function properly due to ongoing issues. To proceed, please install a compatible version by running this command: npm install --global npm@6. For more information ...

javascripthtmlnode.jsangularnpm

Transform object into JSON format

Is there a way to transform an object into JSON and display it on an HTML page? let userInfo = { firstName: "O", lastName: "K", email: "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b44476b445b05484446">[ema ...

htmljsonangular

Issue with input-group background display in bootstrap 4

My new computer is running on Windows 11 with Chrome version 97. There seems to be a bug in the original bootstrap code, as evidenced by the attachment. The issue can be seen on the Bootstrap website By adding "border-radius:0!important" to ".input-group ...

cssbootstrap-4windows-11

Issue with Angular 2 NgFor Pattern Error Message Display Absence

I am attempting to incorporate inputs with a regex requirement within an ngFor loop, but I am not receiving the expected error message when entering something that does not match the required pattern. Even when I input an incorrect pattern, "Test" remains ...

javascriptregexhtmlangular

Is it possible to modify the text alignment of a div based on the dropdown selection

I'm having trouble getting the alignment to work with my dropdown list that styles the font of a div. It's frustrating because I usually find solutions easily on Google, but this time the align feature is really bugging me. <SCRIPT LANGUAGE=" ...

javascriptcss