I am struggling with this. All of the divs open and close when you click on their buttons. But what I want them to do is the following: If one div is open and I click a button to open the next I want the open one to close and the new one to open if that makes sense. Here is a link to the code:
https://codepen.io/iamdesfranco/pen/QNVqLO
<div class="container-fluid hidden-xs">
<div class="row blue">
<!-- Block One -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
<!-- Block Two -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Personal Involvement</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aPInvolveD" aria-expanded="false" aria-controls="aPInvolveD" >
See More
</a>
</div>
</div>
<!-- Block Three -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
</div>
</div>
<!-- ALL ACCORDIONS FOR DESKTOP AND TABLET
=========================================== -->
<!-- ACCORDION 1 -->
<div class="collapse blue" id="aPInvolveD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ACCORDION 2 -->
<div class="collapse blue " id="aClientD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ACCORDION 3 -->
<div class="collapse blue " id="aTestD">
<div class="text-center">
<h3>Bobby Rangecroft</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
<br />
<h3>Dick Bruyns</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna<br />
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat.<br />
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint<br />
occaecat cupidatat non proident, sunt in culpa qui officia<br />
deserunt mollit anim id est laborum.
</p>
</div>
</div>
<!-- ROW TWO
==============-->
<div class="container-fluid blue hidden-xs">
<div class="row">
<!-- Block One -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Our Clients</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aClientD" aria-expanded="false" aria-controls="aClientD">
See More
</a>
</div>
</div>
<!-- Block Two -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Background Image</h3>
</div>
</div>
<!-- Block Three -->
<div class="col-sm-4 fixed-height-twofive">
<div class="text-center vertical-allign">
<h3>Testimonials</h3>
<p>
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<a class="btn btn-default" role="button" data-toggle="collapse" href="#aTestD" aria-expanded="false" aria-controls="aTestD">
See More
</a>
</div>
</div>
</div>
</div>
Try the following
$('.collapse').on('show.bs.collapse', function () {
$('.collapse').not($(this)).collapse('hide');
});
demo https://codepen.io/anon/pen/dMqVOY
Wrap all the collapsable divs in a parent div
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
Then wrap each one in a panel div
<div class="panel">
And then reference the parent for each toggle button
parent="#accordion"
https://codepen.io/partypete25/pen/BKOwzZ
Related
Okay, so I've been attempting to fix this bug on my personal website for a while now. I can't seem to find an answer that's specifically relating to my issue. It might be uncommon -- could be that I used a poor practice when making it.
I have three columns on a page. The HTML for these columns is as follows:
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /*adds the card */
padding: 16px;
text-align: center;
background-color: #f1f1f1;
overflow: hidden;
}
.column {
float: left;
width: 31%;
font-size: 1em;
font-family: 'Arvo', serif;
text-align: center;
position: relative;
padding: 0 5px;
}
.col-row {
padding: 0 8em;
margin: 0 -5px;
}
.col-row:after {
content: "";
display: table;
clear: both;
}
<div class={"columns-container"}>
<div class="col-row">
<div class="column" id={"column-1"}>
<div class="card">
<h3>Title</h3>
<div class={"p-container"}>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<h4 class="heading-details">Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
<h4 class="heading-more-details">More Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="column" id={"column-2"}>
<div class="card">
<h3>Title</h3>
<div class={"p-container"}>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<h4 class="heading-details">Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
<h4 class="heading-more-details">More Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="column" id={"column-3"}>
<div class="card">
<h3>Title</h3>
<div class={"p-container"}>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p>"Lorem ipsum dolor sit amet elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
</div>
<h4 class="heading-details">Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
<h4 class="heading-more-details">More Details:</h4>
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
</div>
</div>
I don't really mind scraping the CSS I have for this. I just want to make it work. So, what's happening is the tag lines up. The text in the .p-container lines up perfectly. But, the tags (heading-details and heading-more-details) don't line up responsively. So, they'll align on a 15-inch laptop, but not at the half screen or on a 13-inch laptop. Usually, they're one or two lines off.
I'd especially like to get it so that it lines up regardless of how much text is in the p-container. That way it's easier to manage to add/remove text. Any help would be much appreciated!
Well, I am very new to web programming, I am coding a landing page where first column content is not fixed, it can be more or less.
I want to hide my CTA, once a user reaches to author info.
Any help will be appreciated, Thanks for your concern.
My codes:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Scroll</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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.2/js/bootstrap.min.js"></script>
<style>
.cta{
position:sticky;
top:600px
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Hide a div after regular amount of scroll</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="article-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="col-sm-4">
<div class="cta bg-dark py-5 text-light text-center">
subscribe our newsletter
</div>
</div>
</div>
</div>
<div class="container author-info">
<div class="row">
<div class="col-sm-12 py-3">
<div><strong>Author name</strong></div>
<div class="py-2"><strong>Author info:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</body>
</html>
However I tried this, but as I said scroll amount can be undefined/ depends upon content
<script>
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 900 && y < 1200) {
$('.cta').fadeIn();
} else {
$('.cta').fadeOut();
}
});
</script>
There is a neat jQuery plugin called jQuery Visible which will deliever what you want. I added a snippet. Since I dont know what you mean by CTA, the article content will be hidden once the full author info is visible. If you pass true to the visible function the hiding starts as soon as a pixel of the div is visible.If you scroll out and everything of the div is out of screen, the other part gets shown again.
Of course you could go for your own implementation but since you are already using jQuery why not go for an existing solution.
$(document).scroll(function() {
if ($('.author-info').visible(true)){
$('.article-content').hide();
} else {
$('.article-content').show();
}
});
(function($) {
/**
* Copyright 2012, Digital Fusion
* Licensed under the MIT license.
* http://teamdf.com/jquery-plugins/license/
*
* #author Sam Sehnert
* #desc A small plugin that checks whether elements are within
* the user visible viewport of a web browser.
* only accounts for vertical position, not horizontal.
*/
$.fn.visible = function(partial) {
var $t = $(this),
$w = $(window),
viewTop = $w.scrollTop(),
viewBottom = viewTop + $w.height(),
_top = $t.offset().top,
_bottom = _top + $t.height(),
compareTop = partial === true ? _bottom : _top,
compareBottom = partial === true ? _top : _bottom;
return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
};
})(jQuery);
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Scroll</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/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.2/js/bootstrap.min.js"></script>
<style>
.cta {
position: sticky;
top: 600px
}
</style>
</head>
<body>
<div class="jumbotron text-center">
<h1>Hide a div after regular amount of scroll</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div style="height:200px">
</div>
<div class="container">
<div class="row">
<div class="col-sm-8">
<div class="article-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<div class="col-sm-4">
<div class="cta bg-dark py-5 text-light text-center">
subscribe our newsletter
</div>
</div>
</div>
</div>
<div class="container author-info">
<div class="row">
<div class="col-sm-12 py-3">
<div><strong>Author name</strong></div>
<div class="py-2"><strong>Author info:</strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div>
</div>
</div>
</div>
</body>
</html>
I am using anchor tags to link navbar to the headers inside of a div on same page. When I click on the last header it shows up in the middle of the container instead of at the very top.
I want the bottom header to show up at the very top of the container and leave some white space below it.
Here is codepen https://codepen.io/sasha-code/pen/qBOyBrW
Is there an html way to do it? if not, is there a js way to add white space dynamically below the last section to make sure the header is at the top.
PS. I know this is happening because there is no scroll left. I want to somehow add it dynamically. I don't want to add hardcoded white space.
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
text
</div>
<div>
<h2 id="middle">Header Middle</h2>
text
</div>
<div>
<h2 id="bottom">Header Bottom</h2>
text
</div>
You could set the min-height of the last div section to 100% of the parent:
.content {
height: 400px;
width: 300px;
overflow:scroll;
}
#last {
min-height: 100%;
}
<div>
<a href='#top'>Top</a>
<a href='#middle'>Middle</a>
<a href='#bottom'>Bottom</a>
</div>
<div class="content">
<div>
<h2 id="top">Header Top</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div >
<h2 id="middle">Header Middle</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="last">
<h2 id="bottom">Header Bottom</h2>
Lorem ipsum dolor sit amet.
</div>
</div>
Put this code at the end of your file:
<br> <br> <br>
Now it should work fine 😊
This question already has an answer here:
Bootstrap 3 Equal Height Columns with jQuery need assistance with the js
(1 answer)
Closed 6 years ago.
I am trying to have 2 Divs with in a row, each has slightly different content. I managed to resize them equal with js, the problem is, when it loads the collapsed content, it won't resize to the new size.
This is my try :
JS Fiddle
Html:
<div class="row">
<div class="col-md-6">
<div class="col-content">
<div id="accordion" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4>BOX 1</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">more...</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body background-solid">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">...less</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="col-content">
<div id="accordion2" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4>BOX 2</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse in">
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseFour">more...</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body background-solid">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<a data-toggle="collapse" data-parent="#accordion2" href="#collapseThree">...less</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
js:
var heightTallest = Math.max.apply(null, $(".col-content").map(function ()
{
return $(this).outerHeight();
}).get());
$('.col-content').css({ height: heightTallest + 'px' });
CSS:
.col-content {
overflow: hidden;
border-style: solid;
border-color: rgba(5, 47, 90, 0.8);
border-width: medium;
border-radius: 5px;
padding: 0 15px;
max-height: auto;
}
You can use min-height css property.
Now, on your JS do this:
$('.col-content').css({ "min-height": heightTallest + 'px' });
What happened here? This means that your div will obey the minimum height of whatever value you set to it, but will have any height greater than the min-height you provided.
See demo
I am trying to implement smooth scrolling in my website, but haven't been able to use any of the jquery plugins available, as i am not too acquainted with javascript.
Any help in this regard would be helpful.
Here is the relevant code:`
<div class="container-fluid" id="navigation">
<div class="row-fluid">
<div class="span2 ">
<div class=" sidebar-nav sidebar-nav-fixed">
<h4>About</h4>
<h4>Our Services</h4>
<h4>Awards</h4>
</div>
</div>
<div class = "span10" style="margin-top:30px">
<div class="hero-unit " >
<div id="about" >
<h1 >About </h1>
<hr>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p>
</div>
<div id="ourservices" >
<h1 >Our Services</h1>
<hr>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="awards" >
<h1 >Awards</h1>
<hr>
<p align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
</div>
</div>
</div>
My intention is to display on "about" section ...and when a user clicks on say services... the hero-unit scrolls to "services" section.
A detailed answer would be appreciated as i am not very acquainted with javascript.
Thanks a lot.
You can use iscroll plugin of jquery...
Iscroll
I have used this in may mobile web-site : smooth-scroll
go to the year selection page..there is a smooth scroll implementation.