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

How can I modify my code to ensure that trs and th elements are not selected if their display property is set to none?

I am currently working on creating a filter for my pivot table, but I am unsure of how to dynamically calculate the sum of each row/column based on whether they are displayed or not. If you need any other part of my code, feel free to ask. To hide employee ...

javascripthtmlhtml-table

How can we use JavaScript to retrieve an element with custom styling?

I've encountered a strange issue with my script where it seems to stack up borders and display a 2px border instead of the intended 1px border when switching elements on click. Here is the link code I am using: <li ><a href="plumbing.php"&g ...

javascriptjqueryhtmlcssstyles

Bootstrap has been successfully installed and is functioning properly; however, the custom styling does not seem to be

After successfully installing bootstrap and JavaScript through NPM in my Laravel 6 project, I have noticed that the bootstrap is functioning properly on my website. However, I encountered an issue when trying to add custom styles in the resources/sass/ap ...

laravelnpmbootstrap-4

What is the best way to utilize Enquire.js for dynamically adding and removing CSS classes?

I'm looking to dynamically add and remove a css class based on a media query using Enquire.js but I could use some guidance on utilizing the functions properly. Here's what I envision in pseudo code: if (screens max-width > 480px){ #thumb.r ...

javascriptcssenquire.js

How can you determine the index of a table column in JavaScript when you only know its class name?

I am looking for a way to dynamically hide/show table columns based on their classes, without having to add classes to each individual <td> element. This should be accomplished using classes on the columns themselves. Here is a sample of the table ...

javascriptjqueryhtmlcss

Can divs be arranged in a similar fashion as images?

My goal is to create a navigation bar (#nav) with each nav item being a div (#nav div). However, my current approach isn't working as expected. Here is the code I'm using: #nav { background: url("navbg.png"); /* navbg.png is 1x40 pixels */ ...

htmlcss

Populate select2 with the selected value from select1 without the need to refresh the page or click a button

Being a novice in PHP and Javascript, I am looking for a way to populate the "info" select dropdown based on the selected value from the "peoplesnames" dropdown without refreshing the page or using a button. Here's my code: HTML: <select id="peo ...

javascriptphpjqueryhtmlmysql

What is the best way to combine multiple classes when declaring them in CSS?

I'm attempting to combine the following code snippets (possibly misunderstood the term) - is there a way to have them both perform the same function without creating another class with identical attributes? .games span { display: inline-block; ...

cssclassconcatenationhtml

What is the best way to connect or link to a HTML table row <tr>

Is there a way to trigger an alert when the user double clicks on the whole row? ...

javascripthtmlcsshtml-table

Can you set up an automatic redirect after a payment is made on paypal.me?

Is there a way to automatically redirect users to a "successful payment" landing page after they make a payment on paypal.me? While PayPal offers an "Auto Return" feature, I am uncertain if it is applicable for paypal.me or if there are alternative methods ...

htmlredirectpaypalpaymentpayment-processing

Customizing Material UI Select for background and focus colors

I am looking to customize the appearance of the select component by changing the background color to "grey", as well as adjusting the label and border colors from blue to a different color when clicking on the select box. Can anyone assist me with this? B ...

javascriptcssreactjstypescriptmaterial-ui

Uninterrupted Horizontal Text Scrolling using Pure CSS

I am currently working on developing a news ticker that displays horizontal text in a continuous scrolling manner, without any breaks between loops. While I hope to achieve this using only CSS and HTML, I'm unsure if it's feasible. Here is my ini ...

htmlcss

Develop a JSF/XHTML project that showcases a single XHTML page containing duplicated content of itself

Recently, I encountered a scenario where I have an xhtml page containing a sessionscoped bean. I am looking to utilize this page twice within another html page - once on the left side and again on the right side of the screen. The issue I faced is that w ...

javahtmljsfxhtml

The overflow-x property causes the left side of the component to be cut off when scrolling

When the screen width is insufficient to display a component properly, I need it to be horizontally scrollable. However, when scrolling to the left after making it scrollable due to a smaller screen size, the left side of the component gets cut off and can ...

cssreactjsstyled-components

The width of a CSS border determines its height, not its width

When I try to use border-width: 100px; to set the horizontal width to 100px, it ends up setting the height to 100px instead. Any help would be greatly appreciated. .border-top-green { border-top: 1px solid #4C9962; border-width: 100px; padding-t ...

css

Settings for the packaging of web components

Is there a way to configure a web component in vue.config.js and separate the iconfont.css section when building? I am using the vue-cli-service build --target wc-async --name chat-ui src/views/Chat/Launcher.vue --report command to package the web compon ...

cssvue.jsweb-componentfont-facevue-cli

Are there various types of HTML5 document declarations available?

Back in the days when I used to create web pages in XHTML, there were three types of doctype available - strict, transitional, and frameset. Are these different types of doctypes still present in HTML5? ...

htmldoctype

Adjust the size of a Div/Element in real-time using a randomly calculated number

Currently, I am working on a script that is designed to change the dimensions of a div element when a button on the page is clicked. The JavaScript function connected to this button should generate a random number between 1 and 1000, setting it as both the ...

javascripthtmlcss

What is the best approach for designing a UI in Angular to showcase a matrix of m by n dimensions, and how should the JSON format

click here for a sneak peek of the image Imagine a matrix with dimensions m by n, containing names on both the left and top sides. Remember, each column and row must be labeled accordingly. ...

javascripthtmljsonangularuser-interface

Connect your HTML page to your CHtml page

Can anyone guide me on how to link a button in an HTML page to a chtml page within an ASP MVC project? image description here ...

htmlasp.net-mvc