Develop Reference

Cards with read-more in bootstrap

I am using the following code to achieve a three-column design with a read more button. I changed the columns to display:flex to make them the same height. It looks fine when in default state. When you open a read-more option though, the other buttons shift too. Is there a possibility to prevent the buttons from shifting?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- make cards same height -->
<section id="cards" class="py-5 bg-white">
<div class="container">
<div class="row">
<!-- diplay cards as flexbox, direction column and space between -->
<div class="col-12 col-sm-4 d-flex flex-column justify-content-between">
<!-- wrap text in a div -->
<div>
<h1>Shootings</h1>
<p>Willkommen bei den ganzen tollen Elementen</p>
<div class="collapse mb-3" id="collapseWidthExample1">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
<!-- wrap button in a div -->
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample1" aria-expanded="false" aria-controls="collapseWidthExample">Read more</button>
</div>
</div>
<div class="col-12 col-sm-4 d-flex flex-column justify-content-between">
<div>
<h1>Shootings</h1>
<p>Willkommen bei den ganzen tollen Elementen. Willkommen bei den ganzen tollen Elementen.</p>
<div class="collapse mb-3" id="collapseWidthExample2">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</div>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample2" aria-expanded="false" aria-controls="collapseWidthExample">Read more</button>
</div>
</div>
<div class="col-12 col-sm-4 d-flex flex-column justify-content-between">
<div>
<h1>Shootings</h1>
<p>Willkommen bei den ganzen tollen Elementen
<div class="collapse mb-3" id="collapseWidthExample3">
This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
</div>
</p>
</div>
<div>
<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample3" aria-expanded="false" aria-controls="collapseWidthExample">Read more</button>
</div>
</div>
</div>
</div>
</section>

Remove justify-content-between It might work

You can add the align-items-start class to your row div.
<div class="row align-items-start">
But that way you the cards will not have equal heights anymore.

Bootstrap accordion with a foreach loop

my initial problem was that my accordions all opened at the same time but I understood that it was coming from the Id which was the same all the time.
So I tried to make my ID dynamic but that didn't solve my problem.
would you have a solution please? thank you
here is my code:
<div class="accordion mb-5" id="accordion-infos">
<f:for each="{field.container}" as="container">
<!-- foreach bouton contenu -->
<div class="card">
<div class="card-header" id="heading1-{container.buttoncontent}">
<h2>
<button class="accordion-button btn btn-link btn-block text-left"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne-{container.buttoncontent}"
aria-expanded="true"
aria-controls="collapseOne-{container.buttoncontent}">
{container.buttoncontent}
</button>
</h2>
</div>
<div id="collapseOne-{container.buttoncontent}"
class="accordion-collapse collapse"
aria-labelledby="heading1-{container.buttoncontent}"
data-bs-parent="#accordion-infos">
<div class="card-body">
<div class="section-card">
<div class="row">
<div class="col-lg-6 col-md-6">
<f:format.raw>{container.content}</f:format.raw>
</div><!-- col-lg-6 col-md-6-->
</div><!-- row-->
</div><!-- section card -->
</div> <!-- card body -->
</div> <!-- collapsOne -->
</div> <!-- card -->
</f:for><!-- endfor bouton contenu-->
</div><!-- accordion mb-5 -->

using any editable text as an ID with restrictions is a bad idea in general.
for accordions or similar construction you always should use the uid from TYPO3. Or at least the iterator.index of a loop.
As you could have multiple accordions in one page you should combine it.
so your ID should consist of the uid of the container and the uids of the contained elements.
Something like: id="container-{data.uid}-{element.uid}"
or
<f:for each="{field.container}" as="container" iteration="iterator">
:
<div class="card-header" id="container-{data.uid}-{iterator.index}"`>
:
<div id="collapseOne-{data.uid}-{iterator.index}" ...
:

Using jQuery to apply function on a specific Div generated by EJS

I have coded a series of bootstrap collapsible Divs using the Javascript forEach function in an EJS file. These divs all have a button to expand and collapse the div. Initially, pressing on any button will expand all divs but I have managed to overcome that by indexing the IDs of those divs.
My problem now is I have a separate JS file running jQuery. The jQuery is used to hide and show specific font-awesome icons. When the div is collapsed, it shows an arrow-down icon and hides the arrow-up icon. When a div is expanded, it shows an arrow-up icon and hides the arrow-down icon. My jQuery when activated will apply the changes to all divs but I only want to apply it to the div that I clicked. I briefly recall I could use $(this) but haven't been able to find anything that could help me with it.
Please see my JS and EJS files below.
list.js
$('#collapsibleDivBtn').on('click', () => {
var downHiddenStatus = $(".fa-caret-square-down").is("[hidden]")
var upHiddenStatus=$(".fa-caret-square-up").is("[hidden]")
$(".fa-caret-square-down").toggleClass('hidden')
$(".fa-caret-square-down").attr('hidden',!downHiddenStatus)
$(".fa-caret-square-up").toggleClass('hidden')
$(".fa-caret-square-up").attr('hidden',!upHiddenStatus)
});
list.ejs
<!-- Start of the page -->
<div class="container mt-3">
<!-- Title of the page -->
<h3>List of Racks</h3>
<% data.forEach((rack, index) => { %>
<div class="card mb-3" >
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<h5 class="card-title"><strong><%= rack['Cabinet ID'] %></strong></h5>
</div>
<div>
<a id="collapsibleDivBtn" href="#collapsibleDiv<%= index %>" class="btn p-0" data-toggle="collapse">
<i class="far fa-caret-square-down text-primary bg-white"></i>
<i hidden class="hidden far fa-caret-square-up text-danger bg-white"></i>
</a>
</div>
</div>
<h6 class="card-subtitle mb-2 text-muted"><%= rack['Abbreviated Address'] %></h6>
<hr>
<div id="collapsibleDiv<%= index %>" class="collapse">
<div class="row mb-2">
<div class="col">
<p class="card-text">User Status: <br />
<span id="siteStatus" class="statusUpdate" ><%= rack['User Status'] %>
</span>
</p>
</div>
<div class="col">
<p class="card-text">Site Status: <br />
<span id="userStatus" class="statusUpdate">Online
</span>
</p>
</div>
</div>
<div class="row">
<div class="col d-flex justify-content-center">
<p class="mb-0">After Service Status: <br />
<span id="aft_service_status" class="statusUpdate">Unknown
</span>
</p>
</div>
</div>
</div>
</div>
</div>
<% }); %>
</div>

No need for hiding elements. Just use CSS rotate for your icons.
$(".container").on("click", function(){
$(this).find("i").toggleClass("arrowUp");
});
.container{
width: 50px;
height: 50px;
font-size: 50px;
}
.container i{
transition: all 0.4s ease;
}
.arrowUp {
transform: rotateZ(-180deg);
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<div>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
<a class="container">
<i class="fa fa-arrow-down"></i>
</a>
</div>

Add JavaScript var to multiple places on page

I have some HTML with 2 tags having the same name and in my JavaScript I have a var, so that in future if the tel number changes, it only has to be changed in one place (in the JavaScript) and will be applied to all tags with the matched named.
I can't seem to remember how to do this as I can't use 'ID' as the 'Footer' is displayed when the hidden Div is displayed. One is a <p> and the other is a <span> which the page contains a few of these.
It needs to be JavaScript not jQuery.
Code
<div class="row m-0 d-flex align-items-center p-5">
<div class="col-12 col-lg-6 pr-lg-0">
<h1>Oops, something went wrong</h1>
<span id="otherErrorTxt" style="display: none">
<p>This error has occurred whilst processing your request.</p>
<p>If the error continues, please contact us on:</p>
<p name="telNo" class="text-muted"></p> <!-- TEL NO. TO GO HERE -->
</span>
<span id="fourOfourTxt">
<p>The page you are looking for is not available. This may be because of one of the following reasons:</p>
<ul class="mb-3">
<li>The page may have been moved or removed</li>
<li>The page may have had its name changed</li>
<li>You may have typed the URL incorrectly</li>
</ul>
</span>
<a class="btn btn-primary col-12 col-lg-2 mt-3" href="/">Go back</a>
</div>
</div>
<div class="row footer">
<div class="col-lg-4">
© 2020 Packnet Limited - All rights reserved
</div>
<div class="col text-right">
<i class="fas fa-phone fa-lg fa-rotate-90 mr-2"></i>
<span name="telNo"></span> <!-- TEL NO. TO ALSO GO HERE -->
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
var telNo = '01234 567 8900 (8.30am till 5.30pm - Mon to Fri excluding bank holidays)';
if (document.getElementById('returnedError').innerHTML.indexOf('404') != -1) {
document.getElementById('fourOfourTxt').style.display = 'block';
document.getElementById('otherErrorTxt').style.display = 'none';
} else {
document.getElementById('fourOfourTxt').style.display = 'none';
document.getElementById('otherErrorTxt').style.display = 'block'
}
document.getElementsByName('telNo').innerHTML = telNo; // Not working
});
</script>

You need to loop over the results of the getElementsByName() function since it returns a collection. See example below. As mentioned in the comments, you shouldn't use name on span elements. It's better to use a class selector instead. The same logic applies for the getElementsByClassName() or querySelectorAll() functions since these return collections as well.
var telNo = '01234 567 8900 (8.30am till 5.30pm - Mon to Fri excluding bank holidays)';
document.getElementsByName('telNo').forEach((el) => {
el.innerHTML = telNo;
});
<div class="row m-0 d-flex align-items-center p-5">
<div class="col-12 col-lg-6 pr-lg-0">
<h1>Oops, something went wrong</h1>
<span id="otherErrorTxt" style="display: block">
<p>This error has occurred whilst processing your request.</p>
<p>If the error continues, please contact us on:</p>
<p name="telNo" class="text-muted"></p> <!-- TEL NO. TO GO HERE -->
</span>
<span id="fourOfourTxt">
<p>The page you are looking for is not available. This may be because of one of the following reasons:</p>
<ul class="mb-3">
<li>The page may have been moved or removed</li>
<li>The page may have had its name changed</li>
<li>You may have typed the URL incorrectly</li>
</ul>
</span>
<a class="btn btn-primary col-12 col-lg-2 mt-3" href="/">Go back</a>
</div>
</div>
<div class="row footer">
<div class="col-lg-4">
© 2020 Packnet Limited - All rights reserved
</div>
<div class="col text-right">
<i class="fas fa-phone fa-lg fa-rotate-90 mr-2"></i>
<span name="telNo"></span>
<!-- TEL NO. TO ALSO GO HERE -->
</div>
</div>

Overflowing text from one Bootstrap row hides behind text of another row

Pardon my jargon, I just recently got into web development and have poor communication skills.
I'm using bootstrap 4 alpha and JQuery 3.
I have a chatroom within one fluid container with two rows: a send-message bar and a recieve message column(plus the pm column and userlist column)
Here is my code:
<div class="container-fluid">
<div class="row">
<!-- Chat View Column -->
<div class="col-sm-2">
<ul id="privateChats" class="list-group fixed" style=" margin-top:20px;">
</ul>
</div>
<!-- Message View Column -->
<div class="col-sm-8" style="float: left;">
<ul class="" id="messages" style="margin: 20px;"></ul>
</div>
<!-- Connected Users Column -->
<div class="col-sm-2">
<ul id="connectedUsers" class="list-group fixed" style=" margin-top:20px">
<div class="btn-group-vertical" style="width:100%">
</div>
</ul>
</div>
</div>
<!-- Send message bar -->
<div class="row">
<form action="">
<div class="col-lg-9 col-md-9 text-right">
<input type="text" id="m" style="width:100%; height:55px;" class="form-control" placeholder="Message" autocomplete="off" />
</div>
<div class="col-lg-3 col-md-3 text-left">
<button style="width:50%"><span class="fa fa-paper-plane" style="font-size:38px; color:white;"></span></button>
</div>
</form>
</div>
</div>
When the "Message View Column" fills up, text disappears behind the second row and I can't see the most recent messages. How do I fix this?
Let me know if I should add more detail
I added the Javascript tag because I'm not opposed to using Javascript to solve the problem

Adding a margin-bottom: 98px; (height of the 2nd .row) to the css of the 1st .row, would solve your problem. Then you can use scrollBy(0, 100) to scroll the page to the bottom (used 100 as example)