I've been learning the Bootstrap framework, and today sat down to familiarize myself with the accordion module, but even when I simply copy and paste the code into my page, it does not display properly, and there is no functionality. I am assuming this has to do with a problem with the CDN...includes?...or a missing stylesheet, but I am at a loss as to which one, since I copied and pasted the necessary links directly from the bootstrap site. Maybe I missing something else. But other components work, such as the Card module, just no luck with the accordion Below is the code. Thank you for any help.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Practicing Bootstrap</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/divPract.css">
<!-- Add icon library -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<div class="cotainer-fluid">
<div class="row">
<div class="col-lg-12">
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Accordion Item #1
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the first item's accordion body.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="flush-collapseTwo" class="accordion-collapse collapse" aria-labelledby="flush-headingTwo" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the second item's accordion body. Let's imagine this being filled with some actual content.</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
Accordion Item #3
</button>
</h2>
<div id="flush-collapseThree" class="accordion-collapse collapse" aria-labelledby="flush-headingThree" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-flush</code> class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
Go somewhere
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I found the necessary cdn with a little more digging. This was what was needed:
<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>
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed last year.
Improve this question
I'm trying to make it so when people select the button on top of the page one of the three links, which are ids inside the page, will be selected (they look like tabs with the jquery ui attachment but I couldn't get it on the pen), but despite my attemps I can't make it work by using a function and if staments, any advice on what I'm doing wrong? I never made something more than basic in javascript
Full code here, since due to character limit i can't put the full HTML and CSS on the post
Codepen: https://codepen.io/bladeranner5005/pen/GRMVGbR
HTML
<!doctype html>
<html lang="it" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
<!--Required meta tags-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Font links-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#300;400&family=Libre+Franklin:wght#800&display=swap" rel="stylesheet">
<!--Bootstrap CSS-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!--Plugins -->
<link href="../external-files/jquery-ui-1.13.1.custom/jquery-ui.min.css" rel="stylesheet" type="text/css">
<link href="../external-files/jquery-ui-1.13.1.custom/jquery-ui.theme.min.css" rel="stylesheet" type="text/css">
<script src="../external-files/jquery-ui-1.13.1.custom/external/jquery/jquery.js" type="text/javascript"></script>
<script src="../external-files/jquery-ui-1.13.1.custom/jquery-ui.min.js" type="text/javascript"></script>
<!--Custom css-->
<link href="../css/index-css.css" rel="stylesheet" type="text/css">
<link href="../css/content-css.css" rel="stylesheet" type="text/css">
<title>Andrea D'Angelo-Portfolio</title>
</head>
<body>
<!-- NAVBAR ----------------------------------------------------------------------------------------------------------->
<!--Modified bootstrap NAVBAR, with different colors and positioning when in desktop----------------------------------->
<nav class="navbar navbar-expand-lg fixed-top navbar-dark background-black">
<a class="navbar-brand" href="#"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav mx-auto">
<a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Home</a>
<a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Curriculum</a>
<a class="nav-item nav-link active nav-link-custom-1 nav-item-spacing" href="#">Portfolio</a>
<a class="nav-item nav-link nav-link-custom-1 nav-item-spacing" href="#">Contatti</a>
<!--Codice per il dropdown da: https://stackoverflow.com/questions/17904862/bootstrap-position-of-dropdown-menu-relative-to-navbar-item-->
<!--<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle nav-link-custom-2 nav-item-spacing" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</li>-->
</div>
<!--Dropdown item end-->
</div>
</nav>
<!--Main tag----------------------------------------------------------------------------------------------------------->
<main>
<!--Name--------------------------------------------------------------------------------------------------------------->
<section class="container-fluid">
<div class="row">
<div class="col-12 text-center background-black mb-5">
<h1 class="page-title-font">PORTFOLIO</h1>
</div>
</div>
</section>
<!--Random selector------------------------------------------------------------------------------------------------>
<!--Start container-->
<footer class="container-fluid">
<!--ROW 1-->
<div class="row mb-5 mt-5">
<!--ROW 1-A-->
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-4"></div>
<div class="col-8 col-md-4">
<button type="button" class="link-btn-light btn btn-light w-100" id="random-select">Selezione</button>
</div>
<div class="col-2 col-md-4"></div>
</div>
</div>
</div>
<!--CONTENT-------------------------------------------------------------------------------------------------------->
<section class="container-fluid me-0 ms-0">
<div class="row">
<div id="tabs">
<ul id="tab-id">
<li>Pastichair</li>
<li>Bella e brava</li>
<li>Personal space</li>
</ul>
<script type="text/javascript">
$( "#tabs").tabs();
</script>
</div>
</section>
<!--Footer start------------------------------------------------------------------------------------------------------->
<!--Red line-->
<div class="border-top border-5 border-danger" style="width: 100%"></div>
<!--Start container-->
<footer class="container-fluid">
<!--ROW 1-->
<div class="row mb-5 mt-5">
<!--ROW 1-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Home<br>page
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 1-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>curriculum
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
<!--ROW 2-->
<div class="row mb-5 mt-5">
<!--ROW 2-A-->
<div class="col-12 col-md-6 mb-5 mb-md-0">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Online<br>portfolio
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
<!--ROW 2-B-->
<div class="col-12 col-md-6">
<div class="container-fluid">
<div class="row">
<div class="col-2 col-md-3"></div>
<div class="col-8 col-md-6">
Full contacts<br>and info
</div>
<div class="col-2 col-md-3"></div>
</div>
</div>
</div>
</div>
</footer>
</main>
<!-- Javascript for Bootstrap --------------------->
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<!-- Javascript for Bootstrap END------------------>
<!-- My Javascript -->
<script src="../javascript/portfolio-javascript.js"></script>
</body>
</html>
Javascript
//Variable declaration
let button = document.getElementById("random-select");
let tab1 = document.getElementById("pastichair");
let tab2 = document.getElementById("bella-e-brava");
let tab3 = document.getElementById("personal-space");
//Array e function, così da creare un numero casuale tra 0 e 2
let array = ["headerA", "headerB", "headerC"];
button.addEventListener("click", tabRandom())
function tabRandom () {
let randomNumber = Math.floor(Math.random() * array.length);
//If statement per selezionare tab casuale
if (randomNumber === 0) {
tab1.addEventListener("click", function (){
document.getElementById("pastichair").click();
});
}
if (randomNumber === 1) {
tab2.addEventListener("click", function (){
document.getElementById("bella-e-brava").click();
});
}
if (randomNumber === 2) {
tab3.addEventListener("click", function (){
document.getElementById("personal-space").click();
});
}
}
There are two things you could do to make it works.
First, change the callback parameter:
// incorrect, this is you execute a function and pass its value as a callback
button.addEventListener("click", tabRandom());
// correct, this is you pass a function as a callback
button.addEventListener("click", tabRandom);
Then, inside the tabRandom(), you need to remove the addEventListener to make the trigger works:
// not work, this is you assign an event
tab1.addEventListener("click", function (){
document.getElementById("pastichair").click();
});
// trigger a click
document.getElementById("pastichair").click();
See codepen
I have tried to make an accordion with bootstrap but for some reason when I try to use it the accordion will not expand to show the contents. Can someone explain what I am doing wrong?
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Filters
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul>
<li>All Recipes</li>
<li>My Recipes</li>
<li>Breakfast Recipes</li>
<li>Lunch Recipes</li>
<li>Dinner Recipes</li>
<li>Vegeterian Recipes</li>
<li>Vegan Recipes</li>
<li>Low Calorie Recipes</li>
</ul>
</div>
</div>
</div>
</div>
Common solutions to similar questions I have seen online point to jquery script not being run but I have the following scripts in the following order:
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-popRpmFF9JQgExhfw5tZT4I9/CI5e2QcuUZPOVXb1m7qUmeR2b50u+YFEYe1wgzy" crossorigin="anonymous"></script>
(bootstrap 5)
I just wrapped the collapsable sections with a div + id, then gave a data-bs-parent to each div that i have a collapse class for.
# radio button group
<div class="row">
<label class="col-12 col-md-8 col-form-label">
What is your choice ?
</label>
<div class="col-12 col-md-4">
<div class="btn-group btn-group-sm" role="group">
<input type="radio" class="btn-check" name="myRadio" value="yes" id="msg1"
aria-expanded="false"
aria-controls="msg1"
data-bs-toggle="collapse"
data-bs-target="#msg1">
<label class="btn btn-outline-primary" for="msg1">Msg 1</label>
<input type="radio" class="btn-check" name="myRadio" value="no" id="msg2"
aria-expanded="false"
aria-controls="msg2"
data-bs-toggle="collapse"
data-bs-target="#msg2">
<label class="btn btn-outline-primary" for="msg2">Msg 2</label>
</div>
</div>
</div>
<div class="row">
<div class="col" id="display_data"> <!-- id wrapping all collapsed divs -->
<div class="alert alert-warning collapse" id="msg1" data-bs-parent="#display_data">
<strong>Yes</strong><br>
this is msg 1
</div>
<div class="alert alert-warning collapse" id="msg2" data-bs-parent="#display_data">
<strong>No</strong><br>
this is msg 2
</div>
</div>
</div>
jsFiddle: https://jsfiddle.net/2ud7zcth/1/
OP is using version 5 of Bootstrap
I added the official css & js links.
Bootstrap 5 has removed the jQuery dependency
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
crossorigin="anonymous"
/>
</head>
<body>
<div class="container">
<div class="accordion accordion" id="accordionFlushExample">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
Filters
</button>
</h2>
<div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
<div class="accordion-body">
<ul>
<li>All Recipes</li>
<li>My Recipes</li>
<li>Breakfast Recipes</li>
<li>Lunch Recipes</li>
<li>Dinner Recipes</li>
<li>Vegeterian Recipes</li>
<li>Vegan Recipes</li>
<li>Low Calorie Recipes</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
<script
src="https://code.jquery.com/jquery-3.5.1.min.js"
integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
crossorigin="anonymous"
></script>
</html>
Your HTML appears to be fine. As others have stated jQuery is not needed here. I see you're using the Alpha CDN, I would suggest using the beta version as it's more stable. Changing the JS to use this should be all you need to do:
https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js
I'm just starting to learn the code, going through the courses.
I've made the react app, and have a basic HTML template to show up before the bundled.js is loading (for slow connection)
<link href="https://fonts.googleapis.com/css?family=Public+Sans:300,400,400i,700,700i&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="..." crossorigin="anonymous" />
<script defer src="https://use.fontawesome.com/releases/v5.5.0/js/all.js" integrity="..." crossorigin="anonymous"></script>
<div id="app">
<header class="header-bar bg-primary mb-3">
<div class="container d-flex flex-column flex-md-row align-items-center p-3">
<h4 class="my-0 mr-md-auto font-weight-normal"><a class="text-white" href="/">ComplexApp</a></h4>
</div>
</header>
<div class="py-5 my-5 text-center">
<div class="dots-loading">
<div></div>
</div>
</div>
<footer class="border-top text-center small text-muted py-3">
<p>
<a class="mx-1" href="/">Home</a>
<!-- -->|
<!-- -->
<a class="mx-1" href="/about-us">About Us</a>
<!-- -->|<a class="mx-1" href="/terms">Terms</a>
</p>
<p class="m-0">
Copyright © 2020
<!-- -->
ComplexApp. All rights reserved.
</p>
</footer>
</div>
In Chrome, it loads nicely:
But for some reason in Firefox, the page is blank until the js is fully loaded.
Network tab shows that CSS and fonts are loading all the time in parallel with js
What might be the problem? is it some Firefox-specific stuff? Can it be fixed somehow?
I have a bootstrap 4 page set up with collapsible accordion table. Each has a fa-plus-circle icon. When a user clicks on this button, that icon change into fa-minus-circle icon after that i clicked minus-circle icon or button definitely not turn into plus-circle icon. Plss help!
<link rel="stylesheet" href="../../assets/css/bs/bootstrap.css">
<link rel="stylesheet" href="../../assets/css/custom/custom.css">
<link rel="stylesheet" href="../../assets/css/bs/bootstrap.min.css">
<link rel="shortcut icon" href="../../assets/img/logo/logoCircle.png" type="image/x-icon">
<link rel="stylesheet" href="../../assets/css/fontawesome/all.css">
<link rel="stylesheet" href="../../assets/css/animate/animate.css">
<script type="text/javascript">
toggleCircle = function(e) {
if ($(e.children).attr("class").includes('down')) {
$(e.children).removeClass("fa-minus-circle");
$(e.children).addClass("fa-plus-circle");
} else {
$(e.children).removeClass("fa-plus-circle");
$(e.children).addClass("fa-minus-circle");
}
}
</script>
<div class="container">
<div class="row">
<div class="accordion col-12" id="accordionExample">
<div class="card">
<div class="card-header bg-light" id="headingOne">
<h2 class="mb-0">
<button class="btn text-dark collapsed" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne" onclick="toggleCircle(this)" >
<span class="fa fa-plus-circle"></span>
How do I recover my account?
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<span>Were sorry to hear that! If you can't sign in to your Pandayan EGC Account.<br><br>
To reset your password:<br>
1. Go to the login page and you see the forgot your password and click that. Enter your email address click proceed.<br>
2. Once you click the proceed button go to your gmail account and there's an email. <br>
3. After that you create new password and click save changes. <br>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../../assets/js/jquery/jquery-3.3.1.js"></script>
<script src="../../assets/js/popper/popper.min.js"></script>
<script src="../../assets/js/bs/bootstrap.min.js"></script>
<script src="../../assets/js/fontawesome/all.js"></script>
<script src="../../assets/js/backstretch/backstretch.js"></script>
<script src="../../assets/js/backstretch/backstretchSettings01.js"></script>
<script src="../../assets/js/bsn/bootstrap-notify.min.js"></script>
<script src="../../assets/js/general/loader.js"></script>
<script src="../../assets/js/general/login.js"></script>
<script src="../../assets/js/general/forgotpassword.js"></script>
<script src="../../assets/js/general/accountregister.js"></script>
Urge to say you don't need any JS at all! Just one line of CSS
.collapsed .fas:before {
content: "\f055"; /* https://fontawesome.com/cheatsheet */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<button class="btn text-dark collapsed" type="button " data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<span class="fas fa-minus-circle"></span> How do I recover my account?
</button>
<div id="collapseOne" class="collapse">OU YEAH</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
And, logically, use <span class="fas fa-minus-circle"></span> if you start collapsed.
To explain, Bootstrap already danymically toggles the collapsed button class. So all the above does, is target that class using CSS, find the .fas icon and change it to the needed one.
I write some control unit that switch couple of containers by using "collapse" class from bootstrap like list with anchors that has special for my hidden containers "href" attribute, here is example of two list elements that can describe behaviour:
<div id="my_list">
<ul>
<li class="active">
<a onclick="return false" data-parent="#switch_tables" href="#collapse1">One</a>
</li>
<li>
<a onclick="return false" data-parent="#switch_tables" href="#collapse2">Two</a>
</li>
</div>
Then in html code i use some container:
<div id="switch_tables" class="panel">
<div id="collapse1" class="collapse in"> SOME IN HERE </div>
<div id="collapse2" class="collapse"> SOMETHING ELSE</div>
</div>
So when i use this stuff and first elemet of list is active the first container is shown too because i add "in" class after "collapse" class. When I switch to the other list element, then first container should dissappear and the second one should be shown. Of course I has more list links and more hidden containers than just 2 but it's just an example. The thing that I want to do is to prevent default behaviour and to forbid active elemet to hide by clicking on it.
So I switch the "active" list element by clicking on list items and also show or hide exact container that has same id that the list has, so the containers is linked with list items, this thing is done by js code:
$(function(){
$('ul li a').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
var to_toggle = $(this).attr('href');
$('.collapse.in').collapse('hide');
$(to_toggle+':not(".in")').collapse('show');
});
});
And now I see when I switch between list items, the containers appear and hide correctly.
When I click on second link, I see how first container is hiding and the second one is appear, and vice versa.
Idea is that if there is open containers, the ones that has "collapse in" class should be closed by js, but how to forbid closing an active container?
For example I click on second link in list, my first container is hiding, second one is appear, I click on second link again and second container dissappear so I dont see anything on screen. but the list item is active.
So the question is how to modify js so only one container can have "collapse in" class at a time, and nothing can remove it until the user will switch it to other container so class "in" will move to other container that is coming from anchor attribute "href" and can't be removed in this place?
If you are using bootstrap , so you can use bootstrap collapse feature for example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Collapse</title>
<link rel="stylesheet" href="../../../dist/css/bootstrap.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Collapse <small>Bootstrap Visual Test</small></h1>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Collapse one content
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Collapse two content
</div>
</div>
</div>
</div>
</div>
<!-- JavaScript Includes -->
<script src="../vendor/jquery.min.js"></script>
<script src="../../transition.js"></script>
<script src="../../collapse.js"></script>
</body>
</html>
So I solve my problem by point from #Zigri2612 but use little different approach:
$(function(){
$('ul li a').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
var to_toggle = $(this).attr('href');
$("#switch_tables").find('div').each(function(){
if ( ('#'+$(this).attr("id")) != to_toggle )
$(this).filter('.collapse.in').collapse('hide');
});
$(to_toggle+':not(".in")').collapse('show');
});
});
Here is a working example for collapse hide and show. here the plus and minus icons are changing. you can alter it for your need.
$(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");
});
});
.bs-example{
margin: 20px;
}
.accordion .fa{
margin-right: 0.5rem;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
</style>
<div class="bs-example">
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button type="button" class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. Learn more.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button>
</h2>
</div>
<div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. Learn more.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h2 class="mb-0">
<button type="button" class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree"><i class="fa fa-plus"></i> What is CSS?</button>
</h2>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. Learn more.</p>
</div>
</div>
</div>
</div>
</div>