I am trying to fix this minor issue on my website. I am using the Bootstrap accordion for a part of my website. Currently the tabs only open when you click on the text over the panel-heading. I want to be able to click the panel-heading and have it open the hidden content rather than the text being the button to open the hidden content. I am unsure how to do it though. Does anyone know how?
http://codepen.io/aahmed2/pen/yOQvVz
Thanks in advance!
Here is the part I am trying to fix (I couldn't get it to look like code on here so please visit the link I provided to Codepen)
<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
Zoonotic Diseases
Bacterial
Fungal
Parasitic
Prionotic
Rickettsial
Spirochetes
Viral
Allergies
Animal Allergies
Environmental Allergies
Environmental Health
This is a Topic
Topic 2
Another Topic
You have to add
role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne"
to the panel divs like this:
<div class="panel panel-default col-md-4" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<div class="panel-heading bites-stings" role="tab" id="headingSeven">
<a >
<h2>Bites and Stings</h2>
</a>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
and so on for the other ones
I modified the panels to be like this (and removed the a (anchor) tag as it is not needed)
(note: fix was applied to first panel only in the running code below)
<div class="panel-heading bites-stings"
data-toggle="collapse" data-parent="#accordion,#accordion2"
href="#collapseOne" aria-expanded="false"
aria-controls="collapseOne" role="tab" id="headingSeven">
<h2>Bites and Stings</h2>
</div>
It should work now.
Also added this to your CSS
div[role="tab"]:hover {
cursor: pointer;
}
Running sample below (note: fix was applied to first panel only in the running code below)
div[role="tab"]:hover {
cursor: pointer;
}
#accordion2 {
margin-top: -20px;
}
.panel-heading:focus {
outline: 0;
border: none;
}
.panel-group {
clear: both;
}
.panel-group .panel {
border-width: 0;
padding: 0 !important;
border-radius: 0%;
}
.panel-group .panel-heading {
height: 100px;
text-align: center;
color: #fff;
padding-top: 2%;
border: 1px solid #fff;
border-radius: 0%;
background-color: rgba(0, 0, 0, 0.5);
}
.panel-group .panel-heading h2 {
color: #fff;
text-shadow: 2px 2px 3px #000000;
padding-top: 90px;
}
.panel-group .panel-heading a:active,
.panel-group .panel-heading a:visited,
.panel-group .panel-heading a:focus {
text-decoration: none !important;
}
.panel-group .panel-collapse {
background-color: #DDDDDD;
}
.panel-group .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
.panel-group > .panel {
margin-top: 5px;
}
.panel-group .panel-heading {
background-color: rgba(0, 0, 0, 1);
border-radius: 0%;
color: #fff;
height: 350px;
text-align: center;
}
.bites-stings {
background: url(http://animals.sandiegozoo.org/sites/default/files/juicebox_slides/bee_honeycomb_03.jpg);
background-size: cover;
}
.pet-health {
background: url(http://petnetpull1.petnet.netdna-cdn.com/wp-content/uploads/2015/11/Pets-Dogs-Cats.jpg?c1906d);
background-size: cover;
}
.livestock-health {
background: url(https://aos.iacpublishinglabs.com/question/aq/700px-394px/what-is-a-group-of-cows-called_d87d5c1c-8102-4634-baea-c03e5bd8784f.jpg?domain=cx.aos.ask.com);
background-size: cover;
}
.zoonotic {
background: url(http://www.urdogs.com/wp-content/uploads/2015/08/talking-to-dog.jpg);
background-size: cover;
}
.allergies {
background: url(http://www.consostatic.com/wp-content/uploads/2009/03/allergie-au-pollen-symptomes-solutions-naturelles-plante-03.jpg);
background-size: cover;
}
.environment-health {
background: url(https://media-cdn.tripadvisor.com/media/photo-s/02/b5/36/97/lake-mcconaughy.jpg);
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading bites-stings" role="tab" id="headingSeven" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<h2>Bites and Stings</h2>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<h4>Mosquitoes</h4>
<h4>Ticks</h4>
<h4>Bees and Wasps</h4>
<h4>Animal Bites</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" role="tab" id="headingTwo">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<h2>Pet Health and Safety</h2>
</a>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<h4>Pet Allergies</h4>
<h4>Toxic Plants</h4>
<h4>Pet and Wildlife Encounters</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" role="tab" id="headingThree">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<h2>Livestock Health and Safety</h2>
</a>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading zoonotic" role="tab" id="headingFour">
<a role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
<h2>Zoonotic Diseases</h2>
</a>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<h4>Bacterial</h4>
<h4>Fungal</h4>
<h4>Parasitic</h4>
<h4>Prionotic</h4>
<h4>Rickettsial</h4>
<h4>Spirochetes</h4>
<h4>Viral</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading allergies" role="tab" id="headingFive">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
<h2>Allergies</h2>
</a>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<h4>Animal Allergies</h4>
<h4>Environmental Allergies</h4>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading environment-health" role="tab" id="headingSix">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
<h2>Environmental Health</h2>
</a>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<h4>This is a Topic</h4>
<h4>Topic 2</h4>
<h4>Another Topic</h4>
</div>
</div>
</div>
</div>
</div>
Related
I have one accordion where all items have another nested accordion. I'm trying to open the first level of accordions by clicking on the button, without opening nested accordions.
I would like to open all "Groups"-accordions and keep sub-accordions "Count 1" and "Count 2" closed.
How can I do that?
$(document).ready(function() {
// Collapse inner groups:
$('#p-lists').on('hide', function(e) {
// Force a collapse (.hide() doesn't seem to work properly here but is unnecessary anyway):
$(e.target).find('.accordion-body')
.removeClass('in')
.attr('style', '');
});
// Make sure parent groups are also opened:
$('#p-lists').on('show', function(e) {
var $parent = $(e.target).parents('.accordion-body');
// Collapse all siblings:
$parent.parents('.accordion-group')
.prevAll('.accordion-group').find('.accordion-body').collapse('hide')
.nextAll('.accordion-group').find('.accordion-body').collapse('hide');
// Then open THIS parent:
$parent.collapse('show');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<h3>Accordion test</h3>
<button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#p-counts-2">Open counts 2</button>
<div class="accordion" id="p-lists">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-1">
<h5>Group 1</h5>
</a>
</div>
<div id="p-lists-1" class="accordion-body collapse">
<div class="accordion-inner">Body p1</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-2">
<h5>Group 2</h5>
</a>
</div>
<div id="p-lists-2" class="accordion-body collapse">
<div class="accordion-inner">
<h4>Inner accordion</h4>
<!-- Start of inner -->
<div class="accordion" id="p-counts">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-1">
<h5>Counts 1</h5>
</a>
</div>
<div id="p-counts-1" class="accordion-body collapse">
<div class="accordion-inner">Counts p1</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-2">
<h5>Counts 2</h5>
</a>
</div>
<div id="p-counts-2" class="accordion-body collapse">
<div class="accordion-inner">Counts p2</div>
</div>
</div>
</div>
<!-- end of inner -->
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#p-lists" href="#p-lists-3">
<h5>Group 3</h5>
</a>
</div>
<div id="p-lists-3" class="accordion-body collapse">
<div class="accordion-inner">Body p3</div>
</div>
</div>
</div>
View on jsFiddle
So,
on your button click, we check if any of the sub-accordions have been opened, if yes, we close them;
on the normal accordion panel click, we wouldn't intentionally close the sub-accordions;
Snippet below:
$(document).ready(function() {
$('#myBtn').click(function() {
($('#group1').hasClass('collapsed')) ? $("a#group1").trigger('click'): '';
($('#group2').hasClass('collapsed')) ? $("a#group2").trigger('click'): '';
($('#group3').hasClass('collapsed')) ? $("a#group3").trigger('click'): '';
$("a.accordion-toggle-inner:not('.collapsed')").each(function() {
$(this).trigger('click');
});
});
});
#group1,
#group2,
#group3 {
color: red;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="container">
<button id='myBtn' type="button" class="btn btn-warning" data-toggle="collapse"> open the first level of
accordions by clicking on the button, without opening nested accordions</button>
<div class="accordion">
<a class="accordion-toggle collapsed" data-toggle="collapse" id='group1' href="#p-lists-1">
<h5>Group 1</h5>
</a>
<div id="p-lists-1" class="accordion-body collapse">
Body p1
</div>
<div class="accordion-group">
<a id='group2' class="accordion-toggle collapsed" data-toggle="collapse" href="#p-lists-2">
<h5>Group 2</h5>
</a>
<div id="p-lists-2" class="accordion-body collapse">
<div class="accordion-inner">
<h4>Inner accordion</h4>
<!-- Start of inner -->
<div class="accordion" id="p-counts">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle collapsed accordion-toggle-inner" data-toggle="collapse" href="#p-counts-1">
<h5>Counts 1</h5>
</a>
</div>
<div id="p-counts-1" class="accordion-body collapse">
<div class="accordion-inner">Counts p1</div>
</div>
</div>
<a class="accordion-toggle collapsed accordion-toggle-inner" data-toggle="collapse" data-parent="#p-counts" href="#p-counts-2">
<h5>Counts 2</h5>
</a>
<div id="p-counts-2" class="accordion-body collapse">
Counts p2
</div>
</div>
<!-- end of inner -->
</div>
</div>
</div>
<a class="accordion-toggle collapsed" data-toggle="collapse" id='group3' href="#p-lists-3">
<h5>Group 3</h5>
</a>
<div id="p-lists-3" class="accordion-body collapse"> Body p3</div>
</div>
UPDATE: in light of questioner's comment above
This is my first post here so please don't be mad at me if I'm doing something wrong.
Here is the case: Trying to add bootstrap 3 scrollspy functionality into my code on codepen and it's basically not working. Tried different solutions from stackoverflow, etc. and nothing helps.
Is there any good person who can take look into my code?
HTML:
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div data-spy="scroll" data-target="#nav" data-offset="0">
<h3 class="text-center" id="about">about</h3>
<h3 class="text-center" id="projects">projects</h3>
<h3 class="text-center" id="contact">contact</h3>
</div>
CSS:
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
In codepen settings tab I included:
CSS:
bootstrap.min.css
JS:
jquery.min.js
bootstrap.min.js
Here is a link to my codepen: https://codepen.io/PatrykJamroz/full/RMZJva
First thing is you need to initiate the body and not a div tag so your body should have the following:
<body data-spy="scroll" data-target=".navbar" data-offset="0">
And not the:
<div data-spy="scroll" data-target="#nav" data-offset="0">
because the body is the thing that the scroll event is attached to so initiating a div does no good unless you are scrolling with that div.
Next you need to attach it the the .navbar or the nav itself would be the best practice. And also I see that you are using jquery 3 and this may cause an issue with bootstrap 3 so you may want to switch to jquery 2.
I think that you don't really undestand how bootstrap scrollspy actually work. You have to make the 'body' as the main scrollspy container! take a look:
$('body').scrollspy({
target: '#bs-example-navbar-collapse-1'
})
$('#scrollDiv').on('activate.bs.scrollspy', function () {
//Do stuff if there is a new event in scrollspy
})
.container-fluid {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.row {
margin-left: 0;
margin-right: 0;
}
body {
position: relative;
}
<div id="scrollDiv" class="container-fluid" data-spy="scroll" data-target="#bs-example-navbar-collapse-1">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">Patryk Jamróz</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active">About <span class="sr-only">(current)</span></li>
<li>Projects</li>
<li>Contact </li>
</ul>
</nav><!-- navbar -->
<div>
<div id="about" class="col-md-12">
<h3 class="text-center">about</h3>
<div class="row">
<div class="col-sm-6">
<img class="img-responsive center-block" src="https://thumb1.shutterstock.com/display_pic_with_logo/2877733/272163653/stock-photo-happy-young-man-wearing-glasses-and-smiling-as-he-works-on-his-laptop-to-get-all-his-business-272163653.jpg" alt="not me">
</div>
<div class="col-sm-6">
<h4>Mechanical Designer</h4>
<p><span><i class="fa fa-user-circle"></i></span> An open-minded, creative and focused on new tech solutions</br>
<span><i class="fa fa-tv"></i></span> Excellent knowledge of such tools as SolidWorks and SolidWorks Simulation</br
<span><i class="fa fa-check"></i></span> FCT, ICT, EOL test systems, rack cabinets, inline systems and sheet metal</br>
<span><i class="fa fa-language"></i></span> English language advanced both speaking and writing</br>
<span><i class="fa fa-graduation-cap"></i></span> AGH UST graduate - Master of Engineering in Mechanical Engineering</br>
<span><i class="fa fa-coffee"></i></span> Automotive, active lifestyle, IT</p>
</div>
</div>
</div>
</div> <!-- About section -->
<hr>
<div id="projects" class="col-md-12">
<h3 class="text-center">projects</h3>
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="http://www.hawkridgesys.com/blog/wp-content/uploads/2018/01/01-Improving-Assembly-Performance-with-SpeedPak.png" alt="dron">
1st well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://embedwistia-a.akamaihd.net/deliveries/678ea92af801e6c2d37e149980d62bcc38d7770b.jpg" alt="engine">
2nd well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
3rd well
</div>
</div>
</div> <!-- Projects 1st row -->
<div class="row">
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
4th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
5th well
</div>
</div>
<div class="col-sm-4">
<div class="well">
<img class="img-responsive center-block" src="https://blog.onu1.com/hubfs/solidworks-2018-3d-interconnect.png?t=1520267377858" alt="whatever">
6th well
</div>
</div>
</div> <!-- Projects 2nd row -->
</div>
<hr>
<div id="contact" class="col-md-12">
<h3 class="text-center">contact</h3>
<h3 class="text-center">Don't hesitate to contact me at:</h3>
<div class="col-xs-12" style="height:5px;"></div>
<h4 class="text-center"><span><i class="fa fa-envelope"></i></span> jamroz.patryk#gmail.com</h4>
<h3 class="text-center">...or just fill the form below!</h3>
<div class="col-xs-12" style="height:5px;"></div>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">E-mail</span>
<input type="text" class="form-control" placeholder="Your E-mail address" aria-describedby="basic-addon1">
</div> <!-- email input-->
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Name</span>
<input type="text" class="form-control" placeholder="Your name" aria-describedby="basic-addon1">
</div> <!-- name input -->
<div class="input-group input-group-lg">
<span class="input-group-addon" id="basic-addon1">Message</span>
<input type="text" class="form-control" placeholder="Your message to me" aria-describedby="basic-addon1">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Send!</button>
</span>
</div> <!-- message input -->
</div>
<div class="col-xs-12" style="height:50px;"></div>
<div class="panel-footer text-center">Made by Patryk Jamróz. March 2018.</div>
</div><!-- Container fluid -->
In that way it work! Good luck, bye.
u can try whit jquery
$("#yourtarget").click(function() {
$('html, body').animate({
scrollTop: $("#yourDiv").offset().top
}, 2000);
});
i'm trying to make sure that each time when new collapse is create it will open only the one that were chosen. right now it just open all when click and close all at the same time
<div ng-repeat = "i in ticket_array">
<div ng-repeat="j in getNumber(i) track by $index">
div class="panel-group" ng-click="expand()">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" >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>
$scope.expand = function(){
$(".collapse").collapse('toggle');
};
$scope.getNumber = function(num) {
console.log(num);
return new Array(parseInt(num.quantity));
};
it create an 3 new collapse but i don know how to make sure it only open the were chosen.
i have try using index it but did not work since my array consist of two object that has the same index
this is my array
[{"type":"men junior", "quantity":"3"},{"type":"men senior", "quantity":"3"}]
Using pure Js to change HTML behaviour into an angular Project is never a good idea.
Have a look at this project for an angular implementation of your collapse : http://embed.plnkr.co/tcTZlA/
The idea is to have a variable that stores a boolean to activate or not your accordeon menu.
In your case ; I'd change your code with :
<div ng-repeat = "i in ticket_array">
<div ng-repeat="j in getNumber(i) track by $index">
<div class="panel-group" ng-click="j.active = !j.active" ng-class="{'expandcollapse-heading-collapsed': j.active, 'expandcollapse-heading-expanded': !j.active}"> // CODE EDITED HERE WITH A NEW VARIABLE
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" >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>
And of course adding some CSS for the transition :
.expandcollapse-item {
overflow: hidden;
border-top:1px solid blue;
}
.expandcollapse-heading-collapsed {
cursor: pointer;
padding: 15px 20px;
position: relative;
z-index: 100000000;
color: black;
background-color: white;
}
.expandcollapse-item:first-of-type {
border-top:0px;
}
.expandcollapse-heading-collapsed h4{
font-size: 16px;
font-weight: normal;
margin:0px;
}
So in this you can make use of $event to add target and specify the inner collapse class. $event will trace the event where it is called like this in javascript. and you can take this event to handle manipulation in your function.
<div ng-repeat = "i in ticket_array">
<div ng-repeat="j in getNumber(i) track by $index">
<div class="panel-group" ng-click="expand($event)">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" >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>
$scope.expand = function($event){
$($event.target).find('.collapse').collapse('toggle');
};
updated solution:
$scope.expand = function($event){
if($($event.target).find('.collapse').hasClass('in')){
$($event.target).find('.collapse').removeClass('in')
}else{
$($event.target).find('.collapse').addClass('in')
}
};
I am trying to Add bootstrap Accordion to my project but its not working.... what is the problem with my code i have added below with JavaScript.
I am also including following files in my project.
Thanks in Advance.
Regards.
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$('.collapse').on('shown.bs.collapse', function () {
$(this).parent().find('.glyphicon-collapse-down').removeClass('.glyphicon-collapse-down')
}).on('hidden.bs.collapse', function () {
$(this).parent().find('..glyphicon-collapse-up').removeClass('.glyphicon-collapse-up').addClass('.glyphicon-collapse-down');
});
});
</script>
You can look for the previous element and find the span with a class of .glyphicon.
Then simply add or remove the up and down classes.
Here is an example.
$('.collapse')
.on('show.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-down')
.addClass('glyphicon-collapse-up')
})
.on('hide.bs.collapse', function () {
$(this).prev().find('.glyphicon')
.removeClass('glyphicon-collapse-up')
.addClass('glyphicon-collapse-down')
});
#import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-up"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse in">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
In order to change the accordion icons I would suggest to use:
.toggleClass() in order to change icons from down to up and vice versa,
show.bs.collapse event
hide.bs.collapse event
$(document).ready(function () {
$('.collapse').on('show.bs.collapse hide.bs.collapse', function () {
$(this).closest('.panel').find('.panel-heading .glyphicon').toggleClass('glyphicon-collapse-down glyphicon-collapse-up')
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2" style="font-size:large;color:black;opacity:0.8;border-radius:05px;min-height:inherit;">
<div id="accordion" class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#fabricBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Fabric
</a>
</h4>
</div>
<div id="fabricBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Wash n Wear</li>
<li>Cotton</li>
<li>Silk</li>
<li>Stone Wash</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#priceBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>
Price
</a>
</h4>
</div>
<div id="priceBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>3120 to 4680</li>
<li>4681 to 6240</li>
<li>Above 6240</li>
</ul>
</div>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#menDressesBody" data-toggle="collapse" data-parent="#accordion">
<span class="glyphicon glyphicon-collapse-down"></span>Men Dresses
</a>
</h4>
</div>
<div id="menDressesBody" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Classic Sherwani</li>
<li>Modern Sherwani</li>
<li>Prince Suit</li>
<li>Mens Shalwar Kameez</li>
<li>WaistCoat Suits</li>
<li>Mens Turbans</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Refer to this link. http://jsfiddle.net/panchroma/3gYa3/
Bootstrap accordion using only CSS
.panel-heading .accordion-toggle:after {
/* symbol for "opening" panels */
font-family: 'Glyphicons Halflings'; /* essential for enabling glyphicon */
content: "\e114"; /* adjust as needed, taken from bootstrap.css */
float: right; /* adjust as needed */
color: grey; /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
/* symbol for "collapsed" panels */
content: "\e080"; /* adjust as needed, taken from bootstrap.css */
}
I'm having a small styling issue with Bootstrap's accordion panel. For some reason when the first panel is clicked the background image inside panel-body is temporarily pushed to the right of the screen. I tried to fix it by adding margin-left: 0 and left: 0 but it didn't affect it at all. I'll be truly grateful for any help. Thanks
My HTML:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div id="collapseOne" class="panel-collapse collapse in bgImg1">
<div class="panel-body">
<div class="collapse1 ">
<div class="col-md-12 ">
<div class="row">
<div class="col-md-6 col-md-push-6">
<div class="introText">
<hr />
<hr />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg1 closedPanel activePanel">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
<h4 class="panel-title caps">
<a>
Hear the News
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</h4>
</div>
</div>
</div>
<!-- end panel -->
<div class="panel panel-default">
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="collapse2">
<div class="row">
<div class="col-md-6 col-md-push-6">
<div class="introText">
<hr/>
<h2 class="caps">SEE WHAT WE</h2>
<h1 class="caps">CHANGED</h1>
<hr/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg2 closedPanel">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<h4 class="panel-title caps">
<a>
See What We Changed
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</h4>
</div>
</div>
</div>
<!-- end panel -->
<div class="panel panel-default">
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="collapse3">
<div class="row">
<div class="col-md-6">
<img src="img/coupon-tubs.png" class="tubsCoupon">
</div>
<div class="col-md-6">
<div class="introText">
<hr/>
<h2 class="caps">ENJOY A LITTLE</h2>
<h1 class="caps">INCENTIVE.</h1>
<hr/>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg3 closedPanel">
<div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
<h4 class="panel-title caps">
<a class="coupon">Get A Coupon
<span class="glyphicon glyphicon-chevron-down"></span>
</a>
</h4>
</div>
</div>
</div>
<!-- end panel -->
</div>
My CSS
.collapse1{
background: url("../img/bg1.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;
margin-left: 0;
left: 0;
}
.collapse2{
background: url("../img/bg2.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;
}
.collapse3{
background: url("../img/bg3.jpg");
background-repeat: no-repeat;
width: 1020px;
height: 569px;
}
.panel-group{
margin-top:3px;
}
.activePanel {
display:none;
}