I'm trying to implement vertical tabs in my bootstrap website.
Here is the code:
HTML:
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-5">
<div class="tabs-left">
<ul class="nav nav-tabs">
<li class="active"><span class="glyphicon glyphicon-heart"></span></li>
<li><span class="glyphicon glyphicon-star"></span></li>
<li><span class="glyphicon glyphicon-headphones"></span></li>
<li><span class="glyphicon glyphicon-time"></span></li>
<li><span class="glyphicon glyphicon-calendar"></span></li>
<li><span class="glyphicon glyphicon-cog"></span></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="a">
<h3>Who do you Love?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Jen <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Dezi <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Eli <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Mojo <span class="badge pull-right">83%</span></h4>
</li>
<li class="list-group-item">
<h4>Myself <span class="badge pull-right">100%</span></h4>
</li>
</ul>
</div>
<div class="tab-pane" id="b">
<h3>What's your Favorite?</h3>
<ul class="list-group pull-left">
<li class="list-group-item">
<h4>Crystals <span class="badge pull-right">100%</span></h4>
</li>
<li class="list-group-item">
<h4>Healing <span class="badge pull-right">90%</span></h4>
</li>
<li class="list-group-item">
<h4>Exploring <span class="badge pull-right">78%</span></h4>
</li>
<li class="list-group-item">
<h4>QiGong <span class="badge pull-right">83%</span></h4>
</li>
<li class="list-group-item">
<h4>Myself <span class="badge pull-right">100%</span>
</h4></li>
</ul>
</div>
<div class="tab-pane" id="c">CCCCThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="d">DDDDDSecondo sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. Aliquam in felis sit amet augue.</div>
<div class="tab-pane" id="e">EEEEEThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
<div class="tab-pane" id="f">FFFFFFThirdamuno, ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. Quisque mauris augue, molestie tincidunt condimentum vitae.</div>
</div><!-- /tab-content -->
</div><!-- /tabbable -->
</div><!-- /col -->
</div><!-- /row -->
</div><!-- /container -->
CSS
body {
background-color: #ddd;
}
h3 {
margin-top: 0;
}
.badge {
background-color: #777;
}
.tabs-left { margin-top: 3rem; }
.nav-tabs {
float: left;
border-bottom: 0;
li {
float: none;
margin: 0;
a {
margin-right: 0;
border: 0;
background-color: #333;
&:hover {
background-color: #444;
}
}
}
.glyphicon {
color: #fff;
}
.active .glyphicon {
color: #333;
}
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
border:0;
}
.tab-content {
margin-left: 45px;
.tab-pane {
display: none;
background-color: #fff;
padding: 1.6rem;
overflow-y: auto;
}
.active { display: block; }
}
.list-group {
width: 100%;
.list-group-item {
height: 50px;
h4, span {
line-height: 11px;
}
}
}
Javascript:
var tabsFn = (function() {
function init() {
setHeight();
}
function setHeight() {
var $tabPane = $('.tab-pane'),
tabsHeight = $('.nav-tabs').height();
$tabPane.css({
height: tabsHeight
});
}
$(init);
})();
Its implementation is as in this link.
But when I try it in my website, I get a weird result like this:
Why is it happening?
Related
So, I made a nested accordion, and it works find with outer elements, but inner elements don't seem to be expanding, when I click them, the outer gets display:none. If someone could explain their answer if they have one, I have been doing this for 2 days, and I'm getting tired of it very much. I have put the accordion inside of an outer accordion to have same class, and I loop them from the JS file, but it just seems pointless at this point I think, I lost 2 days on this task :(
const accordionItem = document.getElementsByClassName("accordion--item");
const accordionContent = document.getElementsByClassName("accordion__content");
const accordionNested = document.getElementsByClassName("accordion--nested");
for (let i = 0; i < accordionItem.length; i++) {
accordionItem[i].addEventListener("click", (e) => {
accordionItem[i].classList.add("accordion--open");
accordionContent[i].style.display = "block";
e.stopPropagation();
for (let j = 0; j < accordionItem.length; j++) {
if (j != i) {
accordionContent[j].style.display = "none";
accordionItem[j].classList.remove("accordion--open");
}
}
});
}
/**
* Required CSS
*/
.accordion__title {
cursor: pointer;
margin: 0;
position: relative;
}
.accordion__icon {
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
}
.accordion__icon .line-01,
.accordion__icon .line-02 {
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 2px;
background-color: #272343;
transition: 0.3s;
}
.accordion__icon .line-02 {
transform: rotate(90deg);
}
.accordion__content {
display: none;
}
.accordion--open > .accordion__title .line-02 {
transform: rotate(0deg);
}
/* end Required CSS */
/**
* Now let's make it look pretty!
*/
body {
font-family: "Rubik", sans-serif;
max-width: 768px;
margin: 0 auto;
padding: 40px 5%;
color: #111;
overflow-y: scroll;
}
h1 {
text-align: center;
margin: 0 0 40px;
}
.accordion {
margin-top: -1px;
border-top: 1px solid #272343;
border-bottom: 1px solid #272343;
}
.accordion__title {
padding: 20px 16px;
font-size: 16px;
transition: 0.2s;
}
.accordion__content {
padding: 24px 16px;
}
.accordion__content p {
margin: 0 0 16px;
}
.accordion__title:hover {
background-color: #433d6f;
color: #fff;
}
.accordion__title:hover .line-01,
.accordion__title:hover .line-02 {
background-color: #fff;
}
.accordion--open > .accordion__title {
background-color: #272343;
color: #fff;
}
.accordion--open > .accordion__title .line-01,
.accordion--open > .accordion__title .line-02 {
background-color: #fff;
}
.accordion--nested .accordion__title {
padding: 16px;
font-size: 14px;
}
.accordion--nested .accordion__content {
padding: 24px 16px 16px;
}
.slideUp {
height: 0;
}
.slideDown {
height: 200px;
}
<!DOCTYPE html>
<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.0">
<title>Document</title>
<link rel="stylesheet" href="./css/nested.css">
</head>
<body>
<h1>JS accordion</h1>
<div class="accordion">
<div class="accordion--item">
<h4 class="accordion__title">
Accordion Title 01
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 01
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 01 -->
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 02
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 02 -->
</div><!-- end .accordion__content -->
</div><!-- end .accordion 01 -->
<div class="accordion--item">
<h4 class="accordion__title">
Accordion Title 02
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 01
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 01 -->
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 02
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 02 -->
</div><!-- end .accordion__content -->
</div><!-- end .accordion 02 -->
<div class="accordion--item">
<h4 class="accordion__title">
Accordion Title 03
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 01
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 01 -->
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 02
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 02 -->
</div><!-- end .accordion__content -->
</div><!-- end .accordion 03 -->
</div>
</body>
<script src="./nested.js"></script>
</html>
You need to put code to open parent accordion itens.
See the code between // BEGIN: Open parent accordion and // END: Open parent accordion
const accordionItem = document.getElementsByClassName("accordion--item");
const accordionContent = document.getElementsByClassName("accordion__content");
const accordionNested = document.getElementsByClassName("accordion--nested");
for (let i = 0; i < accordionItem.length; i++) {
accordionItem[i].addEventListener("click", (e) => {
accordionItem[i].classList.add("accordion--open");
accordionContent[i].style.display = "block";
e.stopPropagation();
for (let j = 0; j < accordionItem.length; j++) {
if (j != i) {
accordionContent[j].style.display = "none";
accordionItem[j].classList.remove("accordion--open");
}
}
// BEGIN: Open parent accordion
let recursiveNode = accordionItem[i];
while( (recursiveNode = recursiveNode.parentNode) ){
if (recursiveNode.classList && recursiveNode.classList.contains('accordion--item')) {
recursiveNode.classList.add("accordion--open");
let recursiveNodeChildren = recursiveNode.childNodes;
for(let j = 0; j < recursiveNodeChildren.length; j++) {
let childNode = recursiveNodeChildren[j];
if (childNode.classList && childNode.classList.contains('accordion__content')) {
childNode.style.display = "block";
break;
}
}
}
}
// END: Open parent accordion
});
}
/**
* Required CSS
*/
.accordion__title {
cursor: pointer;
margin: 0;
position: relative;
}
.accordion__icon {
position: absolute;
top: 50%;
right: 24px;
transform: translateY(-50%);
}
.accordion__icon .line-01,
.accordion__icon .line-02 {
position: absolute;
top: 50%;
left: 50%;
width: 16px;
height: 2px;
background-color: #272343;
transition: 0.3s;
}
.accordion__icon .line-02 {
transform: rotate(90deg);
}
.accordion__content {
display: none;
}
.accordion--open > .accordion__title .line-02 {
transform: rotate(0deg);
}
/* end Required CSS */
/**
* Now let's make it look pretty!
*/
body {
font-family: "Rubik", sans-serif;
max-width: 768px;
margin: 0 auto;
padding: 40px 5%;
color: #111;
overflow-y: scroll;
}
h1 {
text-align: center;
margin: 0 0 40px;
}
.accordion {
margin-top: -1px;
border-top: 1px solid #272343;
border-bottom: 1px solid #272343;
}
.accordion__title {
padding: 20px 16px;
font-size: 16px;
transition: 0.2s;
}
.accordion__content {
padding: 24px 16px;
}
.accordion__content p {
margin: 0 0 16px;
}
.accordion__title:hover {
background-color: #433d6f;
color: #fff;
}
.accordion__title:hover .line-01,
.accordion__title:hover .line-02 {
background-color: #fff;
}
.accordion--open > .accordion__title {
background-color: #272343;
color: #fff;
}
.accordion--open > .accordion__title .line-01,
.accordion--open > .accordion__title .line-02 {
background-color: #fff;
}
.accordion--nested .accordion__title {
padding: 16px;
font-size: 14px;
}
.accordion--nested .accordion__content {
padding: 24px 16px 16px;
}
.slideUp {
height: 0;
}
.slideDown {
height: 200px;
}
<!DOCTYPE html>
<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.0">
<title>Document</title>
<link rel="stylesheet" href="./css/nested.css">
</head>
<body>
<h1>JS accordion</h1>
<div class="accordion">
<div class="accordion--item">
<h4 class="accordion__title">
Accordion Title 01
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 01
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 01 -->
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 02
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 02 -->
</div><!-- end .accordion__content -->
</div><!-- end .accordion 01 -->
<div class="accordion--item">
<h4 class="accordion__title">
Accordion Title 02
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 01
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 01 -->
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 02
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 02 -->
</div><!-- end .accordion__content -->
</div><!-- end .accordion 02 -->
<div class="accordion--item">
<h4 class="accordion__title">
Accordion Title 03
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 01
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 01 -->
<div class="accordion--item accordion--nested">
<h4 class="accordion__title">
Accordion Nested Title 02
<i class="accordion__icon">
<div class="line-01"></div>
<div class="line-02"></div>
</i>
</h4><!-- end .accordion__title -->
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio.</p>
<p>Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra
non, semper
suscipit, posuere a, pede.</p>
</div><!-- end .accordion__content -->
</div><!-- end .accordion nested 02 -->
</div><!-- end .accordion__content -->
</div><!-- end .accordion 03 -->
</div>
</body>
<script src="./nested.js"></script>
</html>
I'm working on tabs here multiple/nested tabs on the same page my code is working fine current class also added data-target attribute also working fine. The problem is on Click function might be I'm not targetting element properly. this children() I used because I have multiple/nested tabs on same page Can anyone suggest me what might be the issue here tabs are not changing click function not working properly
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$(this).children('.at-tab-wrapper').children('.at-tab__item').click(function(ele) {
//debugger;
$(this).closest('.at-tabs').children('.at-tab-wrapper').children('.current').removeClass('current').children('.current').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
hi i fixed your click issue
function atscTabs() {
$('.at-tabs').each(function(index, item) {
var tab_item = $(this).find('.at-tab__item');
var tab_item_title = $(this).find('.at-title__text');
var tab_content = $(this).find('.at-content__item');
tab_content.hide();
//adding data attribute
tab_item_title.each(function(idx, ele) {
$(this).attr('data-target', idx)
});
$(tab_item[0], tab_item_title[0]).addClass('current');
$(tab_content[0]).show();
console.log('test');
//Display current tab content
$('.at-tab__item').click(function(ele) {
//debugger;
$('.at-tab__item').removeClass('current');
$(this).addClass('current');
$(this).find('.at-title__text').addClass('current');
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').hide();
$(this).closest('.at-tabs').find('.at-content-wrapper:first > .at-content__item').eq(parseInt($(this).find('[data-target]').attr('data-target'))).show();
ele.stopPropagation();
});
});
}
atscTabs();
.at-tab__item.current {
padding: 10px 20px;
background-color: #3c98ff;
}
.at-tab-wrapper {
display: flex;
padding: 28px 0px;
}
.at-title__text {
text-decoration: none;
font-size: 18px;
color: black;
}
.current .at-title__text {
color: #fff;
}
.at-tab__item {
padding: 10px 20px;
margin: 0 10px;
background: #e1e1e1;
}
.at-content-wrapper {
font-size: 16px;
padding: 25px;
background: #e1e1e1;
}
hr {
height: 5px;
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="at-tabs-d0ea0f6" class="at-tabs at-tab-default " data-position="default">
<div>
<div class="at-tab-wrapper">
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #1</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #2</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
<div class="at-tab__item">
<a class="at-tab__item_title" href="#">
<div class="at-title-wrapper">
<div class="at-ititle-wrapper">
<span class="at-title__text">Tab #3</span>
</div>
<span class="at-title__subtitle">Sub Title</span>
</div>
</a>
</div>
</div>
</div>
<div class="at-content-wrapper">
<div class="at-content__item">
<p>Tab Content dfdfd</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
<div class="at-content__item">
<p>I am item content. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.</p>
</div>
</div>
</div>
I'm am trying to make multiple boxes, which can expand onclick and close again when clicking on the X. Well first off, the close jquery doesn't work, but that isn't the main thing I'am looking fore, how can I optimize the code, so doesn't become 400-600 hundred lines of the same, just for each box/element.
When click on one box/element, it should expand and so should the content inside - in the order as they come. Then it can be closed again an you would be able to click on another element with the same result - using pretty much the same code.
How can I make the site know, which element has bin click on.
Thanks in advance :)
$(document).ready(function(){
$( ".calendarBox" ).click(function() {
$(".calendarBox").addClass("calendarBoxOpen").delay(2000);
$(".dateTitle").addClass("dateTitleOpen");
$(".dateMonthBox").addClass("dateMonthBoxOpen");
$(".closeMonth").addClass("showMonth");
$(".dateDayBox").addClass("dateDayBoxOpen");
$(".closeDay").addClass("showDay");
$(".dateCloseBtnBox").addClass("dateOpenBtnBox");
$(".closeHr").addClass("showHr");
$(".dayActivitiesInfo").addClass("dayActivitiesInfoOpned");
$(".dayInfoTxt_1May").addClass("dayInfoTxt_1MayOpen");
$(".dayInfoBtnBox_1Maj").addClass("dayInfoBtnBox_1MajOpen");
});
});
$(document).ready(function(){
$( ".dateCloseBtn" ).click(function() {
$(".dayInfoBtnBox_1Maj").removeClass("dayInfoBtnBox_1MajOpen");
$(".dayInfoTxt_1May").removeClass("dayInfoTxt_1MayOpen");
$(".dayActivitiesInfo").removeClass("dayActivitiesInfoOpned");
$(".closeHr").removeClass("showHr");
$(".dateCloseBtnBox").removeClass("dateOpenBtnBox");
$(".closeDay").removeClass("showDay");
$(".dateDayBox").removeClass("dateDayBoxOpen");
$(".closeMonth").removeClass("showMonth");
$(".dateMonthBox").removeClass("dateMonthBoxOpen");
$(".dateTitle").removeClass("dateTitleOpen");
$(".calendarBox").removeClass("calendarBoxOpen");
});
});
.calendarBox { /*This is when closed*/
width:14.28571428571428%;
border:0.5px solid #000;
height:100%;
transition-duration:1s;
}
.calendarBox:hover {
background-color:#8abcc2;
}
.calendarBoxOpen { /*This is when opened*/
width:57.14285714285712%;
}
.calendarDate {
}
.calendarHeader {
display:flex;
}
.dateTitle { /*This is when closed*/
margin-left:15px;
display:none;
transition:ease-in-out;
transition-duration:1s;
}
.dateTitleOpen { /*This is when opened*/
display:block;
}
.dateDayMonthBox {
width:100%;
}
.dateMonthBox { /*This is when closed*/
display:inline-flex;
float:right;
}
.dateMonthBoxOpen { /*This is when Opened*/
margin-left:25px;
}
.closeMonth { /*This is when closed*/
display:none;
}
.showMonth { /*This is when opened*/
display:block;
}
.dateDayBox { /*This is when closed*/
display:inline-flex;
float:left;/*This is when open*/
}
.dateDayBoxOpen { /*This is when opened*/
float:right;
}
.closeDay { /*This is when closed*/
display:none;
}
.showDay { /*This is when opened*/
display:block;
}
.dateCloseBtnBox { /*This is when date is closed*/
-webkit-margin-before: 1.33em;
-webkit-margin-after: 1.33em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
font-weight: bold;
margin-left:25px;
margin-right:5px;
display:none;
}
.dateOpenBtnBox { /*This is visible, when date open*/
display:block;
}
.dateCloseBtn {
}
.closeHr { /*This is when closed*/
display:none;
}
.showHr { /*This is when opened*/
display:block;
}
/*====Content of the calendar day=====*/
.dateDayInformationBox {
}
.dateDayInformation {
width:100%;
display:inline-flex;
overflow-y:hidden;
}
.dayActivitiesInfo { /*This is when closed*/
height:18px;
width:100%;
margin-left: 15px;
padding-left: 10px;
list-style-type:none;
border-left:2.5px solid purple;
}
.dayActivitiesInfoOpned { /*This is when opened*/
height:100%;
width:50%;
margin-left: 15px;
padding-left: 10px;
list-style-type:none;
border-left:2.5px solid purple;
}
/*====The txt======*/
.dayInfoTitel_1May {
}
.dayInfoTxt_1May { /*This is when closed*/
display:none;
}
.dayInfoTxt_1MayOpen { /*This is when opened*/
display:block;
}
.dayInfoBtnBox_1Maj { /*This is when closed*/
display:none;
}
.dayInfoBtnBox_1MajOpen { /*This is when opened*/
text-align: center;
margin: auto;
display:block;
}
<script src="http://code.jquery.com/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="calendarBox">
<div class="calendarDate">
<div class="calendarHeader">
<h3 class="dateTitle">Information</h3>
<div class="dateDayMonthBox">
<div class="dateMonthBox"><h4 class="">1</h4><h4 class="closeMonth">.Maj</h4></div> <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
</div>
<div class="dateCloseBtnBox">
<div class="dateCloseBtn">close</div>
</div><!--The clouse btn-->
</div>
<hr class="closeHr">
<div class="dateDayInformationBox">
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!---------><div class="close">
close
</div>
<div class="calendarBox" onclick="animateDayOpen_1Maj">
<div class="calendarDate">
<div class="calendarHeader">
<h3 class="dateTitle">Information</h3>
<div class="dateDayMonthBox">
<div class="dateMonthBox"><h4 class="">2</h4><h4 class="closeMonth">.Maj</h4></div> <div class="dateDayBox"><h4 class="">M</h4><h4 class="closeDay">andag</h4></div>
</div>
<div class="dateCloseBtnBox" onclick="animateDayClose_1Maj">
<div class="dateCloseBtn">X</div>
</div><!--The clouse btn-->
</div>
<hr class="closeHr">
<div class="dateDayInformationBox">
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Børnekor - kl.14:40</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
<div class="dateDayInformation">
<ul class="dayActivitiesInfo">
<li class="dayInfoTitel_1May">Bord og Vin - kl.18:30</li>
<li class="dayInfoTxt_1May">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</li>
</ul>
<div class="dayInfoBtnBox_1Maj">
<h5>Tilmeldte 23 <span>Icon</span></h5>
<div>
<button>Del</button>
<button>Tilmeld</button>
</div>
</div>
</div>
</div>
</div>
</div>
So, you have multiple boxes that you want to expand/shrink on click. You can give all that boxes one class - boxExpandable for expample, with initial width. Then user clicks on boxExpandable - you should toggle .expanded class with higher width.
If you want some content to be shown only when box is expanded - wrap it in .showWhenExpanded class, like shown below.
$(document).ready(function(){
$('.expandableBox').on('click', function(){
$(this).toggleClass('expanded');
});
});
.box {
margin-bottom: 10px;
padding: 15px;
width: 40%;
border: solid 5px goldenrod;
transition: background-color .4s, width .4s;
}
.box:hover {
background-color: #32cd32;
}
.box.expanded {
width: 80%;
}
.showWhenExpanded {
display: none;
}
.box.expanded .showWhenExpanded {
display: inline-block;
}
<script src="//code.jquery.com/jquery.js"></script>
<div class="content">
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
<div class="box expandableBox">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <span class="showWhenExpanded">Duis aliquam nunc sit amet ante lacinia, vitae dictum erat egestas. Duis rutrum vitae orci vitae euismod.</span></p>
</div>
</div>
See this codepen
I have a site that uses a carosel but I want the next item to the left and right to be partially visible.
As you can see, I have the desired affect on an empty page but when porting it over it behaves strangely.
Here is the code I have used.
HTML
<section id="one">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 center-block">
<div class="carousel slide" id="c1">
<!-- Indicators -->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target=
"#c1"></li>
<li data-slide-to="1" data-target="#c1"></li>
<li data-slide-to="2" data-target="#c1"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-4">
<div class="panel">
<a href="news-article.php">
<div class="panel-img"><img alt=""
height="370" src="img/home/saw-man.png"
width="370"></div>
<div class="panel-content">
<p class="category-name">
111111111e</p>
<p class="title">Lorem ipsum dolor
sit amet, iscing elit.
conseceteur.</p>
<p class="subtext">Lorem ipsum
dolor sit amet, consectetur adipisc
elit. Aenean euismod bibend... um
laoreet. Proin gravida dolor sit
amet lacus accumsan et viverra
justo commodo.</p>
</div></a>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<div class="panel">
<a href="news-article.php">
<div class="panel-img"><img alt=""
height="370" src="img/home/saw-man.png"
width="370"></div>
<div class="panel-content">
<p class="category-name">
2222222</p>
<p class="title">Lorem ipsum dolor
sit amet, iscing elit.
conseceteur.</p>
<p class="subtext">Lorem ipsum
dolor sit amet, consectetur adipisc
elit. Aenean euismod bibend... um
laoreet. Proin gravida dolor sit
amet lacus accumsan et viverra
justo commodo.</p>
</div></a>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-4">
<div class="panel">
<a href="news-article.php">
<div class="panel-img"><img alt=""
height="370" src="img/home/saw-man.png"
width="370"></div>
<div class="panel-content">
<p class="category-name">
3333333333333333</p>
<p class="title">Lorem ipsum dolor
sit amet, iscing elit.
conseceteur.</p>
<p class="subtext">Lorem ipsum
dolor sit amet, consectetur adipisc
elit. Aenean euismod bibend... um
laoreet. Proin gravida dolor sit
amet lacus accumsan et viverra
justo commodo.</p>
</div></a>
</div>
</div>
</div>
</div><a class="left carousel-control" data-slide=
"prev" href="#c1"><i class=
"glyphicon glyphicon-chevron-left"></i></a> <a class=
"right carousel-control" data-slide="next" href=
"#c1"><i class=
"glyphicon glyphicon-chevron-right"></i></a>
</div>
</div>
</div>
</div>
</section>
CSS
.carousel {
overflow: hidden;
}
.carousel-inner {
width: 140%;
left: -18%;
}
.carousel-inner > .item.next,
.carousel-inner > .item.active.right {
left: 0;
-webkit-transform: translate3d(33%, 0, 0);
transform: translate3d(33%, 0, 0);
}
.carousel-inner > .item.prev,
.carousel-inner > .item.active.left {
left: 0;
-webkit-transform: translate3d(-33%, 0, 0);
transform: translate3d(-33%, 0, 0);
}
.carousel-control.left, .carousel-control.right {
background: rgba(255, 255, 255, 1);
width: 25%;
}
JQuery
$(document).ready(function () {
$('#c1').carousel({
interval: 10000
})
$('.carousel .item').each(function () {
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length > 0) {
next.next().children(':first-child').clone().appendTo($(this));
} else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
});
Is there a cleaner way of doing this, rather than expanding the inner element and cloning the children?
Here is what it looks like when I port it over...
However, when I adjust the sizing, you can see the cloned elements slide along from behind.
StackOverflow's been helping me a lot, but now it's the first time i ask. I'm making a website with bootstrap. In Desktop it is fine, but when i test it on my iphone 4 (or chrome's F12) its contents does not fit.
here it goes
CSS
#charset "utf-8";
/* CSS Document */
/* MY CUSTOM CSS*/
/* ------------Bootstrap---------------*/
#media (max-width: #screen-xs) {
body{font-size: 10px;}
container-fluid fill{
width:100%;
height:auto !important;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
.titulo-inicial{
font-size:2em;
text-align:center;
text-transform:uppercase;
}
}
#media (max-width: #screen-sm) {
body{font-size: 14px;}
.fill{
width:100%;
height:auto !important;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
.titulo-inicial{
margin-top:20px;
font-size:2em;
text-align:center;
text-transform:uppercase;
}
}
.container-fluid{
padding:0;
}
body, html {
width: 100% !important;
height: 100% !important;
}
/* MENU SUPERIOR*/
.container-full {
margin: 0 auto;
width: 100%;
}
.fill{
width:100%;
height:100%;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
#media (min-width: 768px) {
.navbar .navbar-nav {
display: inline-block;
float: none;
vertical-align: top;
}
.navbar .navbar-collapse {
text-align: center;
}
}
.brand{
color:#fff;
margin-left: 20px;
margin-top: 12px;
font-size: 1.3em;
float: left;
text-transform:uppercase;
}
#custom-bootstrap-menu .simbolo{
height:46px;
width:46px;
background:url(../img/logo-franken.png);
margin:5px auto 3px auto;
/*float:left;*/
}
#custom-bootstrap-menu .logotipo{
float:left;
color:#fff;
text-transform:uppercase;
font-weight:lighter;
}
#custom-bootstrap-menu.navbar-default .navbar-brand {
color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default {
font-size: 15px;
background-color: rgba(8, 3, 3, 1);
border-bottom-width: 0px;
margin:auto;
}
#custom-bootstrap-menu.navbar-default{
margin-left:0;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a {
color: rgba(255, 255, 255, 1);
background-color: rgba(0, 0, 0, 1);
margin-left:10px;
}
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>li>a:focus {
color: rgba(173, 173, 173, 1);
background-color: rgba(0, 0, 0, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:hover,
#custom-bootstrap-menu.navbar-default .navbar-nav>.active>a:focus {
color: rgba(116, 0, 158, 1);
background-color: rgba(255, 255, 255, 1);
}
#custom-bootstrap-menu.navbar-default .navbar-toggle {
border-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus {
background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
#custom-bootstrap-menu.navbar-default .navbar-toggle:hover .icon-bar,
#custom-bootstrap-menu.navbar-default .navbar-toggle:focus .icon-bar {
background-color: #080303;
}
/****************HOME****************/
/*-------------DIVs------------/
/* ------------ HEADERS ----------*/
.titulo-inicial{
margin-top:20px;
font-size:5em;
text-align:center;
text-transform:uppercase;
}
/* -------------- PARAGRAFOS -------------*/
.texto-inicial{
margin-top:20px;
text-align:center;
font-size:1.5em;
}
/******************* FIM HOME *************************/
/****************SERVICOS****************/
/*-------------DIVs------------*/
.cont-servicos{
margin-left:20px;
margin-right:20px;
}
/* ------------ HEADERS ----------*/
.titulo-servicos{
margin-top:50px;
font-size:2em;
text-align:center;
text-transform:uppercase;
color:#306;
}
h2{
margin-top:20px;
color:#306;
font-size:1.5em;
line-height:20px;
}
/* -------------- PARAGRAFOS -------------*/
.texto-servicos{
max-width:550px;
text-align:center;
margin:auto;
margin-bottom:5%;
color:#333;
}
.desc-servicos{
color:#333;
}
/******************* FIM SERVICOS*************************/
/**************** PORTFOLIO ****************/
/*-------------DIVs------------*/
/*-------------CAROUSSEL------------*/
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
padding:0;
overflow:hidden;
}
/* Background images are set within the HTML using inline CSS, not here */
.fill2 {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
overflow:hidden;
}
/* ------------ HEADERS ----------*/
.titulo-portfolio{
font-size:2em;
text-align:center;
text-transform:uppercase;
color:#306;
}
h2{
margin-top:20px;
color:#306;
font-size:1.5em;
line-height:20px;
}
/* -------------- PARAGRAFOS -------------*/
.texto-servicos{
max-width:550px;
text-align:center;
margin:auto;
margin-bottom:5%;
color:#333;
}
.desc-servicos{
color:#333;
}
/******************* FIM PORTFOLIO Protocolo unimed 1172425*************************/
/**************** ORCAMENTO ****************/
/******************* FIM ORCAMENTO *************************/
/**************** Contato ****************/
/******************* FIM Contato *************************/
/* ------------ COMUM ---------------*/
body {
margin: 0;
padding-top:104px;
font-family: 'Josefin Sans', sans-serif;
}
#logo-img {
width:70px;
height: 40px;
margin:auto;
}
#home {
background:#000;
}
#servicos {
background:#CCC;
}
#portfolio {
background:#F2F2F2;
}
#freelance {
background:yellow;
}
#contato {
background:purple;
}
.fullscreen-bg {
position:absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
/* z-index: -100;*/
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 100%;
height: auto;
}
}
#media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: auto;
height: 100%;
}
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Company</title>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans:700,400italic,400' rel='stylesheet' type='text/css'>
<!-- jQuery -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Scrolling Nav JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrolling-nav.js"></script>
<!-- CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/custom.css">
<!-- Viewport Bootstrap -->
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="custom-bootstrap-menu" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="container-fluid container-full">
<div class="simbolo"></div>
<!--<div class="logotipo">My Company</div>-->
</div>
<div class="navbar-header">
<div class="container-fluid">
<div class="brand visible-sm visible-xs" href="#">My Company</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span> </button>
</div>
</div>
<div class="collapse navbar-collapse navbar-menubuilder">
<ul class="nav navbar-nav">
<li><a class="page-scroll" href="#home">Quem somos</a> </li>
<li><a class="page-scroll" href="#servicos">O que fazemos</a> </li>
<li><a class="page-scroll" href="#portfolio">Portfolio</a> </li>
<!--<li>Cases </li>-->
<li><a class="page-scroll" href="#orcamento">Orçamento</a> </li>
<li><a class="page-scroll" href="#contato">Contato</a> </li>
<li><a class="page-scroll" href="#blog">Blog</a> </li>
</ul>
</div>
</div>
</div>
<div id="home" class="container-fluid fill">
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="vids/video.mp4" type="video/mp4">
</video>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="titulo-inicial"> My Company </h1>
<p class="texto-inicial"> LoMy Companyr sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. <em>Morbi commodo sodales nisi id sodales. Proin consectetur, nisi id commodo imperdiet, metus nunc consequat lectus, id bibendum diam velit et dui.</em> Proin massa magna, vulputate nec bibendum nec, posuere nec lacus. <small>Aliquam mi erat, aliquam vel luctus eu, pharetra quis elit. Nulla euismod ultrices massa, et feugiat ipsum consequat eu.</small> </p>
</div>
</div>
</div>
</div>
<div id="servicos" class="container-fluid fill">
<div class="row cont-servicos" >
<div class="col-md-12">
<h1 class="titulo-servicos"> O que fazemos </h1>
<p class="texto-servicos "> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. Phasellus eu sem sapien, sed vestibulum velit. Nam purus nibh, lacinia non faucibus et, pharetra in dolor. Sed iaculis posuere diam ut cursus. </p>
<div class="row desc-servicos">
<div class="col-md-4">
<h2><img src="img/ico-dg.png"> Design Gráfico </h2>
<p> Identidade Visual (Logotipo), Folders, Cartazes
</div>
<div class="col-md-4">
<h2><img src="img/ico-wd.png"> Web Design </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
<div class="col-md-4">
<h2><img src="img/ico-de.png"> Design Editorial </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
</div>
<div class="row desc-servicos">
<div class="col-md-4">
<h2><img src="img/ico-ev.png"> Edição de Vídeo </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
<div class="col-md-4">
<h2><img src="img/ico-3d.png"> Renderização 3D </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
<div class="col-md-4">
<h2><img src="img/ico-ad.png"> Assessoria em Design </h2>
<p> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst. </p>
</div>
</div>
</div>
</div>
</div>
<div id="portfolio" class="container-fluid fill" style="padding:0;">
<header id="myCarousel" class="carousel slide" style="overflow:hidden;">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill2" style="background-image:url(../site-franken-OLD/img/portfolio/1.jpg);"></div>
<div class="carousel-caption">
<h2>Caption 1</h2>
</div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill2" style="background-image:url(../site-franken-OLD/img/portfolio/2.jpg);"></div>
<div class="carousel-caption">
<h2>Caption 2</h2>
</div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill2" style="background-image:url(../site-franken-OLD/img/portfolio/3.jpg)"></div>
<div class="carousel-caption">
<h2>Caption 3</h2>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </header>
</div>
<div id="orcamento" class="container-fluid fill">
<div class="row cont-servicos" >
<div class="col-md-12">
<h1 class="titulo-portfolio"> Orçamento </h1>
<p class="texto-servicos "> Lorem ipsum dolor sit amet, <strong>consectetur adipiscing elit</strong>. Aliquam eget sapien sapien. Curabitur in metus urna. In hac habitasse platea dictumst.. </p>
</div>
</div>
</div>
DEMO
Your CSS
.fill{
width:100%;
height:100%;
min-height:100%;
background-color:#990000;
padding:10px;
color:#efefef;
}
Just remove height:100%; from this.
Suggestion In using Boostrap:
The default format for containers, row and col*'s is
<div class="container"><!-- container-fluid can be used in this div -->
<div class="row">
<div class="col-md-12"><!--Your content that takes 12 columns goes here--></div>
</div>
<div class="row">
<div class="col-md-4"><!--Your content that takes 4 columns goes here--></div>
<div class="col-md-8"><!--Your content that takes 8 columns goes here--></div>
</div>
</div>
Note: Inside a row sum of all columns must be less than or equal to 12. if it greater than 12 then the last element(div ,span etc) in the row will be visible below the other elements of same row.
Is this something very simple that you can use. Or you can refer this stackoverflowlink.