javascript bootstrap Accordion - javascript

I have looked through the numerous questions others have posed about an accordion style collapsable set of panels but I haven't been able to find one in which the panels remain separate and do not retain a header of sorts.
I am looking to have numerous buttons on one side and on the other, a panel to be displayed when a button is clicked. I want only one panel to ever be displayed at a time. I am using BootStrap CSS Framework (love it).
I would greatly appreciate it if someone could please help me fine tune my code. I do not understand where I have gone wrong.
<html lang="en">
<head>
<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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/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]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid main">
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a data-toggle="collapse" data-target="#overview" aria-expanded="true" aria-controls="overview" data-parent="#accordion">Overview</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view1" aria-expanded="false" aria-controls="view1" data-parent="#accordion">View 1</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view2" aria-expanded="false" aria-controls="view2" data-parent="#accordion">View 2</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default collapse in" id="overview">
<div class="panel-heading">
<h3 class="panel-title">Overview</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default collapse" id="view1">
<div class="panel-heading">
<h3 class="panel-title">View 1</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-default collapse" id="view2">
<div class="panel-heading">
<h3 class="panel-title">View 2</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Just add one more layer of panels
<div class="container-fluid main">
<div class="row">
<div class="col-md-2">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active"><a data-toggle="collapse" data-target="#overview" aria-expanded="true" aria-controls="overview" data-parent="#accordion">Overview</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view1" aria-expanded="false" aria-controls="view1" data-parent="#accordion">View 1</a></li>
<li role="presentation"><a data-toggle="collapse" data-target="#view2" aria-expanded="false" aria-controls="view2" data-parent="#accordion">View 2</a></li>
</ul>
</div>
<div class="col-md-10">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel">
<div class="panel panel-default collapse in" id="overview">
<div class="panel-heading">
<h3 class="panel-title">Overview</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default collapse" id="view1">
<div class="panel-heading">
<h3 class="panel-title">View 1</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
<div class="panel">
<div class="panel panel-default collapse" id="view2">
<div class="panel-heading">
<h3 class="panel-title">View 2</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
You might have to adjust the classes for the inner content if you want to get rid of any extra padding / margin. The only thing you have to know is that bootstrap hides the children of any panels under the data-parent unless they match the data-target of what was just clicked.

Related

How to open a accordion item and fire its shown event?

I have an event handler for the show.bs.collapse-Event of a bootstrap accordion.
$('.collapse[data-location]').on('show.bs.collapse', function (e) {
//Do Something...
}
This event handler is executed, if the user opens it. So far ok.
Now I want to open a specific item via Jquery:
$('.panel-collapse').collapse('show');
The specific item is opening, but the above event handler is not fired.
So how can I open a accordion item, with respecting every show.bs.collapse-Event handler?
This is my HTML, if this does matter:
<div class="panel-group accordion">
<div class="panel panel-bordered panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#location1">Hamburg</a>
</h4>
</div>
<div class="panel-collapse collapse" id="location1" data-location="1" style="position:relative">
<div class="panel-body">
<div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Zeitraum</li>
<li role="presentation">Vergleich</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="TabTimespan1"></div>
<div role="tabpanel" class="tab-pane" id="TabCompare1"></div>
</div>
</div>
</div>
</div>
</div>
<!-- .... -->
</div>

area tag/ not clickable in firefox MAC

Hi I made a image map with 2 clickable areas. (The Netherlands and South Africa)
It works fine in Google chrome, Edge, Internet Explorere 11, Safari and mobile/tablet browser and chrome.
But if I open my page: http://www.fruitconneqt.jevdopilot.nl/index.php/teest/
in firefox on my MAC I can't click on the Netherlands or South Africa.
I really don't know why this is not working... so I hope maybe you know what I can change to make this work in mozilla firefox for MAC.
Thanks...
<!DOCTYPE HTML>
<head>
<title>relaties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/ios-orientationchange-fix.min.js"></script>
<!--Fireworks CS5 Dreamweaver CS5 target. Created Wed Dec 02 16:20:39 GMT+0100 (CET) 2015-->
<style>
body {
font-family: Helvetica, Arial, sans-serif;
}
h1 {
font-size: 20px;
}
div {
width: 100%;
text-align: center;
}
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
</style>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/agency.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]AFRIKA 917,563,1062,614| NL 835,161,1000,240-->
</head>
<body bgcolor="#ffffff">
<div>
<img name="relaties" src="img/relaties.jpg" width="1909" height="832" border="0" id="relaties" usemap="#m_relaties" alt="" /><map name="m_relaties" id="m_relaties">
<a data-toggle="collapse" data-target="#collapseSix" class="page-scroll" data-parent="#accordion" href="#collapseSix">
<area shape="rect" coords="896,556,1072,632" href="#collapseSix" alt="" />
</a>
<a data-toggle="collapse" data-target="#collapseOne" class="page-scroll" data-parent="#accordion" href="#collapseOne">
<area shape="rect" coords="816,155,1016,253" href="#collapseOne" alt="" />
</a>
</map>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="wrap text-center">
</div>
</div>
</div>
</div>
<br><br>
<div class="container text-left">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"><strong>The Netherlands</strong><span class="caret" ></span></a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body text-left"> <p><img src="img/logo_fruitconneqt_klein.jpg" width="15%" > Fruit Conneqt - Bekijk de website</p><hr>
</div>
</div>
</div>
<!-- FRANCE -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"><strong>France</strong><span class="caret"></span></a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body text-left">
<p>Honey Crunch Learn more.</p>
</div>
</div>
</div>
<!-- ITALY -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree"><strong>Italy</strong><span class="caret"></span></a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body text-left">
<p>Mazzoni Learn more.</p>
</div>
</div>
</div>
<!-- CHILE -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFour"><strong>Chile</strong><span class="caret"></span></a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body text-left">
<p>CopeFrut Learn more.</p>
</div>
</div>
</div>
<!-- NEW ZEALAND -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseFive"><strong>New Zealand</strong><span class="caret"></span></a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse">
<div class="panel-body text-left">
<p>Taylor New Zealand Learn more.</p>
</div>
</div>
</div>
<!-- SOUTH AFRICA -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title text-left">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseSix"><strong>South Africa</strong><span class="caret"></span></a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse">
<div class="panel-body text-left">
<p><img src="img/capesupra.jpg" width="15%"> Cape Supra - Bekijk de website</p>
</div>
</div>
</div>
<section id="services">
</section>
</div>
</div>
</div>
<script src="js/scrolling-nav.js"></script>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/agency.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.rwdImageMaps.min.js"></script>
<script>
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
</script>
</body>
</html>

how to change collapse direction of a panel in bootstrap

I have a well-known basic collapsible panel which its codes mentioned belowed. I changed some properties via css sets like collapse-in and collapse height&width but could not achieve to change collapsing direction. I want to change it towards top opposite to default position. How can I do that? I assure you that I tried several ways but could not solve the issue.
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
</div>
Just interchange the positions of .panel-heading and #collapse1.
<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="panel-group">
<div class="panel panel-default">
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">Panel Footer</div>
</div>
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
</div>
</div>
</body>
</html>

Toggle (or slide) out specific div on click and hide others

I've been browsing all day trying to find and answer to my problem. I'm stumped now and been running into walls. There are a lot of other topics about showing divs in an accordion-style (bootstrap) but my markup is a lot different than the examples I'm seeing. The way my page is setup is with 3 columns next to each other, then the divs that will appear(on the next row), coming up beneath these columns. I keep running into a lot of parent, child, and next scripts.
snapshot image
Better description
My first question is: is this even possible with my markup? I've tried using the .accordion-group class and data-parent technique but that accomplishes nothing. The other divs that were opened beforehand still persist and must be closed manually.
Secondly, how can I accomplish this?
My markup is as follows:
<section class="no-padding" id="products">
<div class="container-fluid">
<div class="row no-gutter">
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" data-toggle="collapse" data-target="#drums1">
<img src="" alt="img-1" class="img-responsive">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">Category<br>Click for details</div>
<div class="project-name">Rock Drums</div>
</div>
</div>
</a>
</div>
<div class="col-lg-4 col-sm-6">
</div>
<div class="col-lg-4 col-sm-6">
<a class="portfolio-box" data-toggle="collapse" data-target="#drums3">
<img src="" alt="img-3" class="img-responsive">
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
Category
</div>
<div class="project-name">Hip-Hop Drums<br></div>
</div>
</div>
</a>
</div>
</div>
<div class="product-descriptions collapse" id="drums1">
<div class="row">
<div class="col-md-6">Buy and description here</div>
<div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="product-descriptions collapse" id="drums2">
<div class="row">
<div class="col-md-6">Buy and description here</div>
<div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
</div>
</div>
<div class="product-descriptions collapse" id="drums3">
<div class="row">
<div class="col-md-6"><iframe width="854" height="480" src="" frameborder="0" allowfullscreen></iframe></div>
<div class="col-md-6">Buy and description here</div>
</div>
</div>
</div>
</section>
The .product-descriptions classes just set the display:none.
Edit: The second image is a better description. The red crosses are "links" .portfolio-box that will open up the div(green box - .product-descriptions). Each red box has its own corresponding div. The green box is hidden until shown by clicking on the red boxes. I want the corresponding green box to change when a different red box is clicked.
Here's a example for a simple bootstrap accordion: When you click on one, it closes the others. There are 3 panels. First panel is open by default using the class "in".
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Accordion</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. Learn more.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Bootstrap is a 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="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-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>
</body>
</html>

Scrollspy in Boostrap 3 not working

I've searched and searched and can't seem to find my issue. I apologize if this is answered somewhere else. I inherited a "simple" site that needs scrollspy implemented and I can't get anything to work for the life of me.
Here are some excerpts from the code:
HTML NAV
<div class="row" style="width:100%" id="topnav">
<nav id="anchored" role="navigation">
<ul class="nav top-menu fade-in">
<li class="mission_anchor">SERVICES</li>
<li class="stories">ABOUT</li>
<li class="supporters_anchor">REQUEST DEMO</li>
</ul>
</nav>
</div>
<br />
SAMPLE OF FIRST "SERVICES DIV"
<section class="module content">
<div id="services" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>HOW SUPER AGENT MARKETING CAN HELP YOUR AGENTS</h1>
<br />
JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#topnav").on("activate.bs.scrollspy", function(){
alert('smomething happened')
});
$('#topnav').affix({
offset: {
top: 0
}
});
$('body').scrollspy({ target: '#topnav' });
<br />
Full demo site can be found here:Demo Site
Any help would be greatly appreciated as I'm sure it is probably something minor I am overlooking but haven't been able to find in 6 hours of playing with it.
in order to use bootstrap scrollspy your navigation have to be as bootstrap's navigation .
build your NAV as this link below and it will work
http://getbootstrap.com/components/#navbar
try the below example.
$(function(){
$('body').scrollspy({ target: '#myNav' })
})
section > div[id]{
height:800px;
padding-top:50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<nav id="myNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="mission_anchor active">SERVICES</li>
<li class="stories">ABOUT</li>
<li class="supporters_anchor">REQUEST DEMO</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<section class="module content">
<div id="services" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Services Section</h1>
</div>
</div>
<section>
<section class="module content">
<div id="about" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>About Section</h1>
</div>
</div>
<section>
<section class="module content">
<div id="demo" class="row">
<div class="col-md-6 col-md-offset-3 text-center">
<h1>Demo Section</h1>
</div>
</div>
<section>

Categories

Resources