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
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'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>
My Bootstrap nav toggle button is not working.
What is wrong in my code? Why it is not working?
<!DOCTYPE html>
<!-- saved from url=(0077)https://d396qusza40orc.cloudfront.net/phoenixassets/web-frameworks/index.html -->
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html charset=windows-1252">
<title>Ristorante Con Fusion</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/mystyle.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Ristorante Con Fusion</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
</div>
</nav>
<header class="jumbotron">
<!-- Main component for a primary marketing message or call to action -->
<div class="container">
<div class="row row-header">
<div class="col-xs-12 col-sm-8">
<h1>Ristorante con Fusion</h1>
<p style="padding:40px;"></p>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-xs-12 col-sm-4">
</div>
</div>
</div>
</header>
<div class="container">
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align="center">Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Uthappizza</h2>
<p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p>
<p>More ?</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align="center">This Month's Promotions</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Weekend Grand Buffet</h2>
<p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p>
<p>More ?</p>
</div>
</div>
<div class="row row-content">
<div class="col-xs-12 col-sm-3 col-sm-push-9">
<p style="padding:20px;"></p>
<h3 align="center">Meet our Culinary Specialists</h3>
</div>
<div class="col-xs-12 col-sm-9 col-sm-pull-3">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p>
<p>More ?</p>
</div>
</div>
</div>
<footer class="row-footer">
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-1 col-sm-2 col-sm-offset-1">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-xs-6 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
Tel.: +852 1234 5678<br>
Fax: +852 8765 4321<br>
Email: confusion#food.net
</address>
</div>
<div class="col-xs-12 col-sm-4">
<div style="padding: 40px 10px;">
Google+
Facebook
LinkedIn
Twitter
YouTube
Mail
</div>
</div>
<div class="col-xs-12">
<p style="padding:10px;"></p>
<p align="center">? Copyright 2015 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body></html>
Hope so below solution work for you, may be problem is in loading some external library, when you open this page in browser, go to console of browser using F12, see is there any errors or not?
I have created JsFiddle
and in its your nav toggle button is working, but some links inside it like Home, Menu, About not working, because you did not specify links in <a href="#">.
I have js fiddle which works fine,
I tried to replicate it on my local system, where slider(menu icon) neither appears nor works. Here is my jsfiddle and source code, can anyone tell me what I missed.
Jsfiddle: https://jsfiddle.net/karimkhan/nzxd5r3r/10/
source code on local system:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title>Starter Template - Materialize</title>
<!--<link href="font/material-design-icons/Material-Design-Icons.ttf" rel="stylesheet">-->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<link href="css/materialize.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<script>
$(".button-collapse").sideNav();
$(".dropdown-button").dropdown();
$('.button-collapse').sideNav({menuWidth: 240, activationWidth: 70});
</script>
</head>
<body>
<main>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<nav>
<div class="nav-wrapper light-blue lighten-1">
<ul id="nav-mobile" class="full side-nav">
<li>John Daglas
<ul class="collection">
<li class="collection-item avatar">
<img src="http://globe-views.com/dcim/dreams/dog/dog-05.jpg" alt="" class="circle">
<span class="title">Title</span>
<p>First Line <br>
Second Line
</p>
</li>
</ul>
</li>
<li>Follower analysis</li>
<li>Tweet analysis</li>
<li>Retweet analysis</li>
<li>Tweet analysis</li>
</ul>
<!-- Include this line below -->
<a class="button-collapse" href="#" data-activates="nav-mobile"><i class="mdi-navigation-menu"></i></a>
<!-- End -->
</div>
</nav>
<div class="row scrollspy grey lighten-4">
<div class="container">
<div class="row">
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text">Tweets
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<i class="material-icons">repeat</i>
<span class="white-text">Retweet
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Favourite
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Followers
</span>
</div>
</div>
<div class="col s2 m2">
<div class="card-panel green accent-4">
<span class="white-text"> Sentiment
</span>
</div>
</div>
<div class="col s2 m2 ">
<div class="card-panel deep-orange accent-2">
<span class="white-text"> Social score
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s6 m6">
<div class="card-panel teal">
<span class="white-text">Sentiment analysis graph for tweets
</span>
</div>
</div>
<div class="col s6 m6">
<div class="card-panel light-blue accent-4">
<span class="white-text">Sentiment analysis donuts graph for all hastags
</span>
</div>
</div>
</div>
<div class="row">
<div class="col s12 m12">
<div class="card-panel teal">
<span class="white-text">Tags analysis.
</span>
</div>
</div>
</div>
</div>
</div>
</main>
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">© 2014 Copyright Text <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
</div>
</div>
</footer>
<script src="js/init.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
You have to wait until the DOM has been initialized (document has been fully loaded). Wrap your slider code in something like this:
$(function() {
//code
});
Also, you're using an old version of jQuery in the code you posted which is incompatible with Materialize.js. Please use the latest version of jQuery 1.x (check here: https://developers.google.com/speed/libraries/#jquery)
I need to dynamically display the accordance with the check box using bootstrap. When i click the parent check box , then my child boxes are not clicked. with static loading i can able to check it but when i keep the accordance code in JavaScript and run it when button is clicked I am unable to click the child check-boxes .
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="http://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<script>
function getAccordiance()
{
var html ='';
html+='<div class="box-body subjectareaComparsion"> <div class="panel-group" id="accordion"><div class="panel panel-default"><div class="panel-heading">';
html+='<h4 class="panel-title"><input type="checkbox" id="chckHead" class="chckHead" value="subject1"/>';
html+='<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Sample1</a></h4> </div><div id="collapseOne" class="panel-collapse collapse in">';
html+=' <div class="panel-body"><table class="table table-striped"><tr><td><div class="checkbox"> <input type="checkbox" id="checkbox" class="chcktbl" />';
html+='<label for="checkbox">List group item heading</label></div></td></tr> </table></div> </div></div> <div class="panel panel-default">';
html+='<div class="panel-heading"> <h4 class="panel-title"><input type="checkbox" id="chckHead" class="chckHead" value="subject2"/>';
html+='<a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"> Sample2</a></h4></div><div id="collapsetwo" class="panel-collapse collapse">';
html+='<div class="panel-body"><table class="table table-striped"><tr> <td> <div class="checkbox"><input type="checkbox" id="checkbox" class="chcktbl" />';
html+='<label for="checkbox">List group item heading</label> </div></td></tr> </table> </div></div> </div></div> </div>';
$('#dataload').html(html);
}
</script>
</head>
<body class="skin-blue">
<header class="header"> <a href="index.html" class="logo">
</header>
<div class="wrapper row-offcanvas row-offcanvas-left">
<aside class="right-side">
<!-- Content Header (Page header) -->
<section class="content-header">
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li class="active">Sample</li>
</ol>
</section>
<!-- Main content -->
<section class="content">
<div class="row ">
<!-- left column -->
<div class="col-md-6">
<!-- Subject Area -->
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title"> Area</h3>
</div>
<button onclick="getAccordiance()">Submit</button>
<div id="dataload"></div>
</div>
</div>
</div>
</section>
<!-- /.content -->
</aside>
<!-- /.right-side -->
</div>
<!-- ./wrapper -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.chckHead').on('click',function () {
alert("Hi");
$(this).closest('.panel').find(".chcktbl").prop('checked', $(this).prop('checked'));
});
</script>
</body>
</html>
You need to delegate the click event as the checkboxes are dynamically generated.More on delegate
$(document).on('click', '.chckHead', function () {
alert("Hi");
$(this).closest('.panel').find(".chcktbl").prop('checked', $(this).prop('checked'));
});
Demo Fiddle
Demo Here: http://jsfiddle.net/m3o7u7Lm/2/ (built off of your demo in your comments)
$('.childCheckBox').on('click', function() {
// do stuff here
});
The .on('click', function() {}) takes into dynamically added elements to the dom.
Also, it would be easier for you if you built a template and then cloned like this (also shown in the demo) instead of using jquery to build the html:
<div class="content">
<fieldset id="template">
<label><input type="checkbox" class="parentCheckBox">Parent</input></label>
<label><input type="checkbox" class="childCheckBox">Child 1</input></label>
<label><input type="checkbox" class="childCheckBox">Child 2</input></label>
</fieldset>
</div>
Add Another
$('.add').on('click', function(event) {
event.preventDefault();
$('#template').clone(true).attr('id', '').appendTo('.content');
});
hope this helps!