Hi I was using the following code to display an accordion since I have upgraded to bootstrap3 the accordion no longer works, I have tried to add a panel div but the accordion seems to work and then not work I can open each section but when I go back to the first it does not display and none of the others display either?
<div class="row add-top add-bottom-main">
<div class="panel accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading proxim-bg-one">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-two">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseTwo" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-three">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseThree" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading proxim-bg-four">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">
<span class="accordion-arrow"><img title="proxim" alt="proxim" src="images/next.png"></span>Question
</a>
</div>
<div id="collapseFour" class="accordion-body collapse">
<div class="accordion-inner">
<p>Lorem ipsum dolor sit amet, </p>
</div>
</div>
</div>
</div>
</div>
The other issue I have is this line used to be hidden
<img id="nav-arrow" class="hidden-phone hidden-tablet" src="images/nav-left.png" title="logo" alt="arrow"/>
I have updated the code and now it is displayed all the time?
<img id="nav-arrow" class="hidden-sm hidden-md" src="images/nav-left.png" title="logo" alt="arrow">
am I missing something here?
thanks
M
In Bootstrap 3 the accordion markup is no longer supported.
But you can still get an accordion effect using the collapse functionality. There is an accordion example here.
http://getbootstrap.com/javascript/#collapse
Here is an example with your code.
http://www.bootply.com/94409#
As far as your last issue, it looks like bootStrap 3 has new helper classes.
http://getbootstrap.com/css/#helper-classes
hidden-xs applies to phones and hidden-sm applies to tablets.
So:
<img id="nav-arrow" class="hidden-xs hidden-sm" src="images/nav-left.png" title="logo" alt="arrow">
Related
This question pertains to Bootstrap 3 accordion. I'm trying to remove to top border of only the first panel-heading.
Obviously :first-child, nth-child(1), :first-of type is not working as the panel-heading is situated inside a panel div.
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#0" aria-expanded="false">Headline-1</a>
</h4>
</div>
<div id="0" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#1" aria-expanded="false">Headline-2</a>
</h4>
</div>
<div id="0" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#2" aria-expanded="false">Headline-3</a></h4>
</div>
<div id="0" class="panel-collapse collapse" aria-expanded="false" style="height: 0px;">
<div class="panel-body">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
</div>
</div>
</div>
CSS:
.panel-heading{
border-top: 1px solid #e3e3e3;
border-bottom: none;
border-radius: 0;
}
Nevermind, blank moment
just had to target the .panel:first-child .panel-heading
I have a bit trouble with using row.
I have this:
<div class="row">
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-8 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
But I get every Lorem ipsum under each other, not beside. How can I resolve this?
I suspect you might have been using mark-up suitable for either the legacy 'float' or 'flex' grid system whilst Foundation 6's default enabled is 'XY grid'. Thus, the mark-up is different and would cause your columns to stack.
Float/flex grid mark-up
<div class="row">
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-8 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="large-2 medium-12 small-12 columns">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
You can continue to to use 'float' or 'flex' grids but need to specify which you're using in the project. Or, if you want to use the newer 'XY grid', you can modify your mark-up like so.
XY grid mark-up
<div class="grid-x grid-margin-x">
<div class="cell large-2 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="cell large-8 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
<div class="cell large-2 medium-12 small-12">
<div class="callout">
<p>
Lorem Ipsum
</p>
</div>
</div>
</div>
I've made a bootstrap carousel with items each containing three columns.
As the slide transition ends, the items snap into place and very briefly change the height of the parent div.
I've spent all day trying to find a solution but can't see anything! I'm assuming it is something to do with padding/margins as the slide happens. I've tried forcing the items to have no padding or margins but no luck.
Does anyone know anything about this issue? Is there something obvious I'm missing?
The link to the page with the issue is here
And the code itself:
.tourenEvents {
background: #2a2a2a;
}
.tourenEvents .tourenEventsInner {
padding-top: 30px;
padding-bottom: 50px;
color: #fff;
}
.tourenEvents .tourenEventsInner .carousel .item .carouselBlock {
margin: 0 !important; /* This was one of the attempts to fix the issue */
}
.tourenEvents .tourenEventsInner .carousel .item .carouselBlock img {
width: 100%;
}
/* == Carousel Control styles - I don't think the issue comes from here but I'm posting it just incase == */
#tourenCarousel .carousel-indicators {
display: none;
}
#tourenCarousel .carousel-control {
background-image: none !important;
color: #fff;
font-size: 50px;
top: 15vh;
opacity: 1;
-webkit-text-stroke: 2px #2a2a2a;
text-shadow: none;
}
#media (max-width: 768px) {
#tourenCarousel .carousel-control {
padding-top: 10vh;
}
}
#tourenCarousel .carousel-control:hover {
color: #fff;
}
#tourenCarousel .carousel-control:focus {
color: #fff;
}
#tourenCarousel .left {
padding-right: 15px;
}
#tourenCarousel .right {
padding-left: 15px;
}
<div class="tourenEvents col-sm-12">
<div class="tourenEventsInner col-lg-12 col-md-offset-1 col-md-10 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 text-center">
<h3 class="text-center">Check out our events</h3>
<!-- div:tourenCarousel is the carousel of events -->
<div id="tourenCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#tourenCarousel" data-slide-to="0" class="active"></li>
<li data-target="#tourenCarousel" data-slide-to="1"></li>
<li data-target="#tourenCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-10 col-xs-offset-1">
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-10 col-xs-offset-1">
<div class="carouselBlock col-lg-4col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-10 col-xs-offset-1">
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#tourenCarousel" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#tourenCarousel" role="button" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Remove width:100% on .tourenEvents .tourenEventsInner .carousel .item .carouselBlock img
you are resizing width on active class.
Sorry but another bootstrap question, but after 1 1/2 days battling this, I hoped that maybe someone can help me with this.
I have an asp.net 4.5 web form with a bootstrap menu, tabs (they work great!)
During a mobile view I wanted to display an accordion instead of the tabs.
I created a new section and followed the code in bootstraps example, and cannot get it to toggle. When I click on a link nothing happens.
I changed one of the accordion sections to accordion-body collapse in, so that one would section would be open, hoping maybe it would work them.
No luck. It is open when first opening, but once you click on another accordion header, the open one closes and nothing will open.
<section class="hidden-desktop visible-tablet visible-phone">
<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acServ">Services
</a>
</div>
<div id="acServ" class="accordion-body collapse in">
<div class="accordion-inner">
<div>
Services
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acSched">Scheduling
</a>
</div>
<div id="acSched" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Scheduling
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acClient">Clients
</a>
</div>
<div id="acClient" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Clients
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acForm">Formulas
</a>
</div>
<div id="acForm" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Formulas
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acProd">Products
</a>
</div>
<div id="acProd" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Products
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acAbout">About
</a>
</div>
<div id="acAbout" class="accordion-body collapse">
<div class="accordion-inner">
<div>
About
</div>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#acStart">Get Started
</a>
</div>
<div id="acStart" class="accordion-body collapse">
<div class="accordion-inner">
<div>
Get Started
</div>
</div>
</div>
</div>
</div>
</section>
Anyone have any ideas of what is going on?
Oh yes, the scripts are ordered like...
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/bootstrap-collapse.js"></script>
<script src="Scripts/bootstrap-transition.js"></script>
and the css is like...
<link href="Content/bootstrap.css" rel="stylesheet" />
<link href="Content/bootstrap-responsive.min.css" rel="stylesheet" />
<link href="Content/Site.css" rel="stylesheet" />
Site.css is some simple changes, (i.e. Colors) I made to bootstrap.css tabs.
any advice how to select first and last child of Bootstrap collapse module? I need to select ".accordion-heading" first and last..
<div id="accordion2" class="accordion">
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseOne" data-toggle="collapse" data-parent="#accordion2"><br />
Toggle Accordion 1<br />
</a></div>
<div id="collapseOne" class="accordion-body in collapse" style="height: auto;">
<div class="accordion-inner">
<p>Content 1</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseTwo" data-toggle="collapse" data-parent="#accordion2"><br />
Toggle Accordion 2<br />
</a></div>
<div id="collapseTwo" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
<p>Content 2</p>
</div>
</div>
</div>
<div class="accordion-group">
<div class="accordion-heading"><a class="accordion-toggle" href="#collapseThree" data-toggle="collapse" data-parent="#accordion2"><br />
Toggle Accordion 3<br />
</a></div>
<div id="collapseThree" class="accordion-body collapse" style="height: 0px;">
<div class="accordion-inner">
<p>Content 3</p>
</div>
</div>
</div>
http://jsfiddle.net/PzB8D/1/
You must go to accordion-group first, then refer to accordion-heading There's gonna be the only one element with class accordion-heading:)
.accordion-group:first-child .accordion-heading a{color: #f00;}
.accordion-group:last-child .accordion-heading a{color: #0f0;}