Accordion with one tab always expanded. Bootstrap 5 - javascript

I have an accordion made with bootstrap 5. How can i make the accordion has always one tab expanded? in other words i dont want tabs to be closed all together, i want one to be open always. How can i do that with plain javascript?
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h1 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
...
</button>
</h1>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
...
</div>
</div>
</div>
<div class="accordion-item">
<h1 class="accordion-header" id="headingTwo">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo"
>
...
</button>
</h1>
<div
id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample"
>
<div class="accordion-body">
...
</div>
</div>
</div>
I dont want this to happen....

I struggled with the same problem for a while and was finally able to write a solution for it. I'm not a js master so it's probably not the most elegant solution but it works:
<script>
const accordions = document.querySelectorAll(".accordion-collapse");
let opening = false;
accordions.forEach(function (el) {
el.addEventListener("hide.bs.collapse", (event) => {
if (!opening) {
event.preventDefault();
event.stopPropagation();
} else {
opening = false;
}
});
el.addEventListener("show.bs.collapse", (event) => {
opening = true;
});
});
</script>
Kinda late but it may be useful to others too

It seems you want to achieve the design and layout style of a bootstrap accordion but doesn't require it's functionality. The best way to achieve this is writing static html/css instead of using a bootstrap component which is there for a different cause.
According to your question you are trying to make something similar to this:
This is hard-coded using bootstrap, so it would be just opened forever. Use a png of a down chevron or use this from fontawesome. I just linked to an image from an external source from a google to be quick.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="acordionThing" style="margin:5rem">
<div class="col d-flex" style="background-color: rgb(185, 185, 185); ">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here.
</p>
</div>
<div style="width:2rem; float:right; margin-right: 2rem;">
<img src="https://img.icons8.com/ios/452/chevron-down.png" style="width: 2rem; margin-top:0.8rem;"">
</div>
</div>
<div class="col d-flex" style="background-color: rgb(218, 218, 218);">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
</p>
</div>
</div>
</div>
<div class="acordionThing" style="margin:5rem">
<div class="col d-flex" style="background-color: rgb(185, 185, 185); ">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here.
</p>
</div>
<div style="width:2rem; float:right; margin-right: 2rem;">
<img src="https://img.icons8.com/ios/452/chevron-down.png" style="width: 2rem; margin-top:0.8rem;"">
</div>
</div>
<div class="col d-flex" style="background-color: rgb(218, 218, 218);">
<div class="col">
<p style=" margin:1rem">
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
Somekind of a text here. Somekind of a text here. Somekind of a text here. Somekind of a text here.
</p>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

Related

Bootstrap Accordion FAQ Search Function

I am trying to add a search function to a bootstrap accordion that is used for FAQ.
So far, i can't get it to search properly.
JQuery
$(document).ready(function(){
$("#searcher").on("keypress click input", function () {
var val = $(this).val();
if(val.length) {
$(".accordion .card .collapsed").hide().filter(function () {
return $('.card-body', this).text().toLowerCase().indexOf(val.toLowerCase()) > -1;
}).show();
}
else {
$(".accordion .card .collapsed").show();
}
});
});
<div class="search-container">
<input class="input-medium search-query" id="searcher" placeholder="Search">
<button class="btn">Search</button>
</div>
<br>
<div class="row">
<div class="col-sm-12">
<div class="tab-content">
<div id="tab1" class="tab-pane fade show active">
<div class="accordion" id="accordion1">
<div class="card">
<div class="card-header collapsed" id="genOne">
<a href="#collapseOne" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="true" aria-controls="collapseOne">
<p class="mb-0">
Where are you located?
</p>
</a>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="genOne"
data-parent="#accordion1">
<div class="card-body">
<p style="text-align:center; font-size: 16px; ">We are located in , near the downtown area. To learn about local pick
up
options please contact us
at
<br /> support#
or
by phone 616
</p>
That is all of the code im using, if someone can point me in the right direction that would be awesome!
Thank you

Responsive Textarea on Image (Bootstrap)

Somehow i cant figure that out.
Hello everyone.
Ive got a simple frontend with a navbar and 2 Cols underneath.
left col got fixed size of 80px, and the right one got an image inside (so this image is fluid / responsive).
To add an input field over the image isnt the problem at all, but here comes my blockade.
I cant get the inputfield to be responsive to the size of the image.
So my thoughts was, to get the scale of the image and downscale the input.
something like this in JS
$(window).resize(function() {
// 1192 is the original imagewidth
let scale = $(".step:visible").width() / 1192;
let inputposition = document.getElementById(testid);
inputposition .css('transform', 'scale(' + scale + ')');
inputposition .css('transform-origin', 'top left');
});
now i thought about transform: scale(scale); on but this downscales the image too.
maybe someone of you can give me some food for thoughts.
So my goal is, that the inputfield minimizes as well reposition if the window resizes.
heres the sample code im workin with:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Test</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,400i,700,700i,600,600i">
<script src="assets/js/jquery.min.js"></script>
</head>
<body>
<nav class="navbar navbar-light navbar-expand-lg bg-danger clean-navbar">
<div class="container"><a class="navbar-brand logo" >Test</a><button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto">
</ul>
</div>
</div>
</nav>
<main class="page landing-page">
<section class="clean-block clean-info dark" style="padding: 0px;">
<div class="container" style="">
<div class="row align-items-start" style="">
<div id="sidebar" class="col-1 d-md-flex flex-grow-0 flex-shrink-0 bg-danger active" style="max-width: 80px;min-width: 80px;height: 100%;padding:0px">
<ul class="list-unstyled components" style="padding:0px">
<li class="active" id="page1_li" style="position: relative; padding: 10px;">
<a onclick="function(this);" id="page1">
<img src="thumb_page1.jpg" class="img-fluid" alt="Responsive image" style="width:100%">
<div class="overlay">
<i id="overlay_page<?= $i ?>" class=""></i>
</div>
</a>
</li>
</ul>
</div>
<div class="col text-center bg-primary" style="padding: 0px;">
<form class="form-horizontal form" action="submit.php" method="post">
<div class="step " id="page1">
<div class="fullpage" style="" data-fullpage="fullpage">
<img class="img-thumbnail align-items-center" src="page1.jpg" alt="" draggable="false" contenteditable="false">
<!-- input that needs to be scaled -->
<input type="textarea" id="testid" name="testid" value="" style="position:absolute;left:100px;top:150px;width:300px;height:100px">
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
With best regards.
This is really simple. Don't add position:absolute to <input> but use <div> for that.
You need a <div> with position:relative as container. Add image with classes w-100 d-block to make it responsive. Create a <div> overlay and place content inside. <input> and <textarea> with class .form-control will have width:100% by default.
/*DEMO*/body{padding:3rem}
#overlay{
position:absolute;
top:50%;
right:3rem;
left:3rem;
transform:translateY(-50%);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="position-relative">
<img class="w-100 d-block" src="https://via.placeholder.com/400x300/007bff/ffffff" alt="">
<div id="overlay">
<input class="form-control" placeholder="Lorem Ipsum">
<hr>
<textarea class="form-control" placeholder="Lorem Ipsum"></textarea>
</div>
</div>

Plus and Minus icons on bootstrap accordion

I'm trying to toggle between plus and minus icon for bootstrap accordion. On default, plus icon is showing. When accordion collapses, it shows the minus icons and hides the plus icon. I don't know if what I'm saying makes sense but it's really basic for some of you. I'm just a beginner.
I've tried doing it with css with :after and content "+" and content "-" but this is not what I want. I need to use font awesome. I've also tried the js way.
<script>
$(document).ready(function(){
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
</script>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<legend><?php echo $header_title; ?></legend>
<br>
<div class="row">
<div class="col-md-12 accordion-container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0" style="margin: 10px !important">
<button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fa fa-plus"></i>
Card Info
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<!-- SOME CONTENT -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I don't know how to check where I went wrong. All I want is to show the plus and minus icon
$(document).ready(function() {
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function() {
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function() {
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
/*$("#btnCollapse").on("click", function() {
$(".fa-plus").toggleClass("fa-minus");
})
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Main content -->
<section class="content container-fluid">
<legend>
<?php echo $header_title; ?>
</legend>
<br>
<div class="row">
<div class="col-md-12 accordion-container">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0" style="margin: 10px !important">
<button id="btnCollapse" class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Card Info
<i class="fa fa-plus"></i>
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<!-- SOME CONTENT -->
</div>
</div>
</div>
</div>
</div>
</div>
</section>
You can use alternate solution as follow:
$(document).ready(function(){
// Add minus icon for collapse element which is open by default
$(".collapse.show").each(function(){
$(this).prev(".card-header").find(".fa").addClass("fa-minus").removeClass("fa-plus");
});
// Toggle plus minus icon on show hide of collapse element
$(".collapse").on('show.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-plus").addClass("fa-minus");
}).on('hide.bs.collapse', function(){
$(this).prev(".card-header").find(".fa").removeClass("fa-minus").addClass("fa-plus");
});
});
Alex, your code is working fine. Please check this fiddle.
[https://jsfiddle.net/boilerplate/bootstrap][1]
Please make sure your js code must be written after the jquery.js and bootstrap.js loaded.

How to make blur the whole page except the div content in the middle using angular js?

I want something like the attached image. I am able to do the same look except blurring the background. I tried making it using angularjs. I am unable to blur. How can I make it as the below image. I have used the below angular code to make the page blur. I have searched and I have got blurring a page except a form. But in this case it is not a form. I want to blur the page except div content.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.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>
</head>
<body>
<div>
<div class="container">
<center>
<h3 class="container">Select a type</h3>
<div>This is to test the page:
<div class = "btn-group pull-center">
<button type = "button" class = "btn dropdown-toggle" data-toggle = "dropdown">Dropdown
<span class = "caret"></span>
</button>
<ul class = "dropdown-menu" role = "menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
</div>
</center>
</div><br/><br/>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>This is to test the page</p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-primary col-md-6">button 1</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-success col-md-6">button 2</div><br/><br/>
</div>
<div class="row">
<div class="btn btn-warning col-md-6">button 3</div> <br/><br/>
</div>
</div>
</div>
<hr style="margin-right:9cm"></hr>
</div>
<div class="container" style="margin-left:15cm">
<div class="row">
<div class="col-md-6">
<p class="col-md-6"><b>Your paragraph goes here</b><br/>empty space between </p>
</div>
<div class="col-md-4">
<div class="row">
<div class="btn btn-danger col-md-6">Button 4</div><br/><br/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Create three containers, one for your content that doesn't exist on the form, one for the blur and one for the form content.
<div class="normal-content">
<p>Content that is on your page</div>
<div class="blur"></div>
<div class="form-content">
<p>Content that would exist on the form</p>
</div>
CSS
.blur{
position:absolute;
// We'll grow the blur box to be bigger than 100% so there isn't some weird effects that you can get with blur
width: 104%;
height: 104%;
top: -2%;
left: -2%;
filter: blur(5px);
}

how do i display long text after click read more button with shorted text?

I'm using an accordion panel for long comments in my blog. Now I want to add long text to short text and show the full text with this, but I have a problem. If I click the show button, it shows at a newline.
jsfiddle snippet
<div class="panel-group" id="accordion">
<div class="panel panel-default text-left" >
<div>
<div style="color:#000;" class="panel-body text-left"><br>This is short comment for my stack...</div>
</div>
</div>
<div class="panel" >
<div id="collapse2" class="clearfix panel-collapse collapse">
<div class="panel-body" style="color:#000;">overflow post and i hope i can find a good solution for this
</div>
</div>
<div class="panel-heading">'.
<h5><a class="btn btn-block" data-toggle="collapse" data-parent="#accordion" href="#collapse2">Show/Hide</a>
</h5>
</div>
</div>
</div>
I want to add another part to short text without newline.
Add the second part of your text in a span and hide it, then reveal it with JS:
function showMore()
{
if ($('#threedots').css('display')=='none')
{
//already showing, we hide
$('#threedots').show();
$('#full_desc').hide();
}
else
{
//show more
$('#threedots').hide();
$('#full_desc').show();
}
}//end function
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<div style="color:#000;" class="panel-body text-left"><br>This is short comment for my stack<span id="threedots">...</span><span id="full_desc" style="display:none">overflow post and i hope i can find a good solution for this</span></div>
<a class="btn btn-block" data-toggle="collapse" data-parent="#accordion" onclick="showMore()">Show/Hide</a>

Categories