Show a specific <div> on click() - javascript

I have this code
$('.description').hide();
$('li').click(function() {
var id = $(this).attr("id");
$('#product-' + id).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="product-1">Product 1</li>
<li id="product-2">Product 2</li>
<li id="product-3">Product 3</li>
<li id="product-4">Product 4</li>
</ul>
<div class="description-container">
<div class="description" id="product-1">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
</div>
<div class="description" id="product-2">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
</div>
<div class="description" id="product-3">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
</div>
<div class="description" id="product-4">
<h2>Product 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
</div>
</div>
What I want is when I click on li#product-1 , .description-container #product-1 appears.
Same thing if I click on li#product-2, etc.
I try something in jQuery but it does not work.


First, prepending #product- to the the ids of your li elements will give something like "#product-product-1", which won't match anything.
Even if we did correct that, you can't have multiple elements with the same id -- there's no differentiation li#product-1 from div#product-1. ids must be unique; best-case, you'll select the li itself since it's the first match.
Instead, add a data-... attribute to the lis, and use that:
$('.description').hide();
$('li').click(function() {
var id = $(this).data("target");
$('#product-' + id).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li data-target="1">Product 1</li>
<li data-target="2">Product 2</li>
<li data-target="3">Product 3</li>
<li data-target="4">Product 4</li>
</ul>
<div class="description-container">
<div class="description" id="product-1">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
</div>
<div class="description" id="product-2">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
</div>
<div class="description" id="product-3">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
</div>
<div class="description" id="product-4">
<h2>Product 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
</div>
</div>


Firstly you are appending the li id to product- which means you're looking for elements called product-product-1, which don't exist. Secondly your HTML has duplicate id attributes on the li and the related div elements which is invalid.
A better approach would be to use the index() from the clicked li to find the related .description. Try this:
$('li').click(function() {
$('.description').hide().eq($(this).index()).show();
});
.description {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Product 1</li>
<li>Product 2</li>
<li>Product 3</li>
<li>Product 4</li>
</ul>
<div class="description-container">
<div class="description">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
</div>
<div class="description">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
</div>
<div class="description">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
</div>
<div class="description">
<h2>Product 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
</div>
</div>


$('.description').hide();
$('li').click(function() {
var id = $(this).attr("id");
$('#div-'+id).show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li id="product-1">Product 1</li>
<li id="product-2">Product 2</li>
<li id="product-3">Product 3</li>
<li id="product-4">Product 4</li>
</ul>
<div class="description-container">
<div class="description" id="div-product-1">
<h2>Product 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde est necessitatibus illo ducimus impedit debitis facere amet, distinctio explicabo ab, qui modi molestias molestiae incidunt omnis. Quisquam, labore vero amet.</p>
</div>
<div class="description" id="div-product-2">
<h2>Product 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio similique, explicabo voluptatibus. Id sit deserunt impedit, incidunt consequuntur quam quae, dolor non quaerat rem debitis vitae error ipsa quo dignissimos!</p>
</div>
<div class="description" id="div-product-3">
<h2>Product 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi distinctio molestias culpa enim architecto optio ratione, saepe, ullam libero. Mollitia quis, ipsum similique in inventore aut officia optio quam odio?</p>
</div>
<div class="description" id="div-product-4">
<h2>Product 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est distinctio nam minus unde provident, fugit doloremque minima rerum ullam nemo, rem culpa ipsa fugiat quas. Officiis error animi omnis sunt.</p>
</div>
</div>
Change the id of the description div and the selector for hiding the div.

Related

How to go to next and previous and loop them

i have a situation where i need to go to next and previous div content
for example:
if user clicks CTRL + n or next then it should go to (1st time run)
first div content (if cliked CTRL + n)
second div content (if cliked CTRL + n)
third div content
so on .....
for previous this pattern will continue
below is my whole code:
$(function(){
// CTRL + n ===> Next
//CTRL + p ===> Previous
var index = 0;
$('#next').on('click',function(){
});
$('#previous').on('click',function(){
});
// window.location = '#third' should change dynamically
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#first">
first
</a>
<a href="#second">
second
</a>
<a href="#third">
third
</a>
<a href="#fourth">
fourth
</a>
<div id="first">
<hr>
First
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae provident quibusdam maiores laudantium rem quas doloremque expedita tempora omnis, accusantium vel, consectetur eos ratione modi alias obcaecati numquam sapiente temporibus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis quam ipsam voluptates sit minus minima quas quasi itaque error natus, exercitationem, praesentium, laudantium voluptas ut quidem dolore? Rem, id quasi.
</div>
<div id="second">
<hr>
Second
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus illo harum, numquam optio iure quae ducimus ipsam velit corporis quidem omnis fugiat expedita autem vitae magni molestiae doloribus, ullam mollitia.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit, asperiores eum rem, nostrum provident qui sunt ut neque, consequatur quaerat repellendus error? Aliquam deleniti cum et error in, at voluptate.
</div>
<div id="third">
<hr>
Third
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, officia? Id voluptatem voluptas similique, reprehenderit odit ab! Laboriosam deserunt illo est obcaecati quaerat, consequuntur, maxime quia quisquam corrupti recusandae, voluptas.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit repellendus laborum molestiae asperiores necessitatibus repellat eveniet, obcaecati blanditiis numquam aut soluta veritatis unde, quis, dicta illo dolorem, consectetur temporibus molestias!
</div>
<div id="fourth">
<hr>
Fourth
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut ea tempore corrupti, hic vitae repudiandae quod cumque fugiat iste qui accusantium ipsam amet inventore, dignissimos magnam? Ipsam error eaque inventore!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum ipsa itaque eius accusantium. Necessitatibus fugiat dolorum rerum, quam praesentium, aliquam sapiente molestias maiores molestiae. Facilis officia cupiditate quae nisi animi.
</div>
Next |
Previous
Here is jsfiddle: https://jsfiddle.net/jLqt2d1g/9/

See the JS fiddle link JSFiddle(next and previous function)
$(function(){
// CTRL + n ===> Next
//CTRL + p ===> Previous
var id_arr=["first","second","third","fourth"];
var index = 0;
$('#next').on('click',function(){
index++;
var div_id = id_arr[index];
if(index>5){
alert('No More div in this Page');
}else{
alert(div_id);
//based on div_id show the div in page
}
});
$('#previous').on('click',function(){
index--;
var div_id = id_arr[index];
if(index<0){
alert('No More div in this Page');
}else{
alert(div_id);
//based on div_id show the div in page
}
});
// window.location = '#third' should change dynamically
});
i am updated code in the JSfiddle refer that code
In that code in next and previous function you will get the div_id's based on the div'id show div in page

How to stop Drag and Drop bubbling?

I've looked everywhere and cannot seem to find a solution. I am using HTML5's native drag and drop features, which are working great, until I drag a card over another card and they're combining. I don't want them to combine but to drop under the next card.
I assume it's something to do with the appendChild or the fact the cards are within the droppable wrapper? But I can't seem to find another way... Any help?
The codepen is here: https://codepen.io/_and_why_/pen/RyVGPG
<div class="wrap__global">
<div class="wrap__col col__ideas" id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
<h2 class="col__title">Ideas</h2>
<div id="card0" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
<h2>Dmmy Idea</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, libero asperiores! Iusto ut, est, facilis dignissimos assumenda sit neque blanditiis deleniti eum libero facere aspernatur numquam repudiandae quas labore enim!</p>
</div>
<div id="card1" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
<h2>Dmmy Idea 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, libero asperiores! Iusto ut, est, facilis dignissimos assumenda sit neque blanditiis deleniti eum libero facere aspernatur numquam repudiandae quas labore enim!</p>
</div>
</div>
<div class="wrap__col col__prom" id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
<h2 class="col__title">Promising</h2>
<div id="card2" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
<h2>Dummy promise</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex necessitatibus nobis quasi odit, harum quis culpa. Ad blanditiis deleniti officia, at ducimus ratione, aliquam, ullam, architecto eum tempora nam nulla!</p>
</div>
</div>
<div class="wrap__col col__do" id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">
<h2 class="col__title">Do</h2>
<div id="card3" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);">
<h2>Do dummy idea 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi unde non dolor corporis repellendus neque modi? Excepturi soluta placeat, quos aliquam enim, tenetur aspernatur officiis hic, quia, rerum iusto alias!</p>
</div>
</div>
</div>
const card = document.querySelectorAll('.wrap__card');
const columns = document.querySelectorAll('.wrap__col');
function dragstart_handler(e) {
e.dataTransfer.setData('text/plain', e.target.id);
e.dropEffect = "move";
}
function dragover_handler(e) {
e.preventDefault();
e.stopPropogation();
e.dataTransfer.dropEffect = "move";
}
function drop_handler(e) {
e.preventDefault();
var data = e.dataTransfer.getData("text/plain");
e.target.appendChild(document.getElementById(data));
}

In case anyone else comes looking, I figured it out. I added the noAllowDrop function to the cards and now you can't drag on top of them.
<div id="card2" class="wrap__card" draggable="true" ondragstart="dragstart_handler(event);" ondragover="noAllowDrop(event)">
<h2>Dummy promise</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex necessitatibus nobis quasi odit, harum quis culpa. Ad blanditiis deleniti officia, at ducimus ratione, aliquam, ullam, architecto eum tempora nam nulla!</p>
</div>
function noAllowDrop(ev) {
ev.stopPropagation();
}

Adding active class issue bootstrap tab

I'm trying to add .active class first li item for every tab but it works only just one tab why isn't work properly ? is there any property of bootstrap or do I have to do myself ? by the way I'm using bootstrap tabs
$(document).ready(function(){
$(".add-active li:first").addClass("active");
});
body{
margin:70px;
}
.tab-one,.tab-two{
float:left;
width:500px;
margin:30px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="tab-one">
<!-- Nav tabs -->
<ul class="nav nav-tabs add-active" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>First Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<h2>Second Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<h2>Third Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam beatae incidunt magnam nesciunt corrupti architecto sequi dolorem molestias, adipisci cum earum in maxime velit quis animi ipsam unde odio aspernatur!</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<h2>Fourth Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem eveniet, consectetur, totam in quam ipsum iusto voluptates, sunt sequi, dolorum minus praesentium. Mollitia obcaecati, aliquid placeat dolorum, quibusdam ex molestiae.</p>
</div>
</div>
</div>
<!-- tab one-->
<div class="tab-two">
<!-- Nav tabs -->
<ul class="nav nav-tabs add-active" role="tablist">
<li role="presentation">Try</li>
<li role="presentation">Use</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="try">
<h2>Try Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
</div>
<div role="tabpanel" class="tab-pane" id="use">
<h2>Use Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
</div>
</div>
</div>
<!-- tab two-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

You've to use find() instead else it will take just the first instance of the li:first :
$(document).ready(function(){
$(".add-active").find('li:first').addClass("active");
});
Hope this helps.
$(document).ready(function(){
$(".add-active").find('li:first').addClass("active");
});
body{
margin:70px;
}
.tab-one,.tab-two{
float:left;
width:500px;
margin:30px;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="tab-one">
<!-- Nav tabs -->
<ul class="nav nav-tabs add-active" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
<h2>First Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
</div>
<div role="tabpanel" class="tab-pane" id="profile">
<h2>Second Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
</div>
<div role="tabpanel" class="tab-pane" id="messages">
<h2>Third Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam beatae incidunt magnam nesciunt corrupti architecto sequi dolorem molestias, adipisci cum earum in maxime velit quis animi ipsam unde odio aspernatur!</p>
</div>
<div role="tabpanel" class="tab-pane" id="settings">
<h2>Fourth Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem eveniet, consectetur, totam in quam ipsum iusto voluptates, sunt sequi, dolorum minus praesentium. Mollitia obcaecati, aliquid placeat dolorum, quibusdam ex molestiae.</p>
</div>
</div>
</div>
<!-- tab one-->
<div class="tab-two">
<!-- Nav tabs -->
<ul class="nav nav-tabs add-active" role="tablist">
<li role="presentation">Try</li>
<li role="presentation">Use</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="try">
<h2>Try Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis fugiat perspiciatis odio corrupti ab modi eius quaerat, fuga, autem asperiores excepturi hic facere soluta error iusto quibusdam reprehenderit sed nobis.</p>
</div>
<div role="tabpanel" class="tab-pane" id="use">
<h2>Use Tab</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et ducimus blanditiis quis, modi mollitia minima, tenetur a expedita illum magnam alias rem, unde dicta necessitatibus sit ut delectus esse?</p>
</div>
</div>
</div>
<!-- tab two-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

jQuery: fadeOut <div> element with with a close button

I am trying to build a dashboard UI where I want to be able to close some panels. I tried several ways to use the "this" keyword to avoid hard coding everything but couldn't figure it out. I'm sure there has to be a much more effective way to do what I did but I did achieve my goal.
Can anyone enlighten me on what I could do different?
HTML:
<div class="content-section col-sm-6 col-md-5" id="div1">
<div class="cs-header">
<p>Header<i class="fa fa-close"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsam voluptates! Harum odio porro temporibus nisi, amet maiores, rem nostrum sit vitae inventore officiis vel eius soluta atque velit.</p>
</div>
<div class="content-section col-sm-6 col-md-5 col-md-offset-2" id="div2">
<div class="cs-header">
<p>Header<i class="fa fa-close"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam, perferendis impedit, dolores quibusdam blanditiis id ipsum delectus minus eligendi repudiandae amet, velit voluptatum perspiciatis pariatur dicta aut mollitia cupiditate.</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-centered" id="div3">
<div class="cs-header">
<p>Header<i class="fa fa-close"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque magnam quo quisquam, nesciunt, excepturi recusandae harum nisi? Ipsum vel explicabo ab, saepe sed animi ex quas. Voluptate, dicta, et.</p>
</div>
<div class="content-section col-sm-6 col-md-4 col-md-offset-1 col-centered" id="div4">
<div class="cs-header">
<p>Header<i class="fa fa-close"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorum dicta molestias velit, quaerat cum reiciendis commodi rem alias maiores, quis optio quas quasi. Dolorem magnam laborum, nesciunt velit nobis?</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-md-offset-1 col-centered" id="div5">
<div class="cs-header">
<p>Header<i class="fa fa-close"></i></p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae est quibusdam, repellendus quae ullam fugiat quos illum enim sit sunt itaque fugit alias ducimus soluta nihil, tenetur laudantium id, numquam.</p>
</div>
jQuery:
$(document).ready(function() {
$('div').on('click', '#close1', function () {
$('#div1').fadeOut();
});
$('div').on('click', '#close2', function () {
$('#div2').fadeOut();
});
$('div').on('click', '#close3', function () {
$('#div3').fadeOut();
});
$('div').on('click', '#close4', function () {
$('#div4').fadeOut();
});
$('div').on('click', '#close5', function () {
$('#div5').fadeOut();
});
});

Below is an example where the user clicks on .btn-close and then fades out the closest section. It's much easier to bind an event to an class instead of several id's.
Since we're listening to an event we can use $(this) within the event listener. It will return the element that was clicked (in this example the anchor). When we got the clicked element we can use [.closest][1] to find the parent element based on class. And then we can use fadeOut().
$(document).ready(function() {
// Listen to clicks on btn-close
$('.content-section').on('click', '.btn-close', function () {
// Get closest content-section and fade it out.
// $(this) will be the anchor with the class btn-close.
$(this).closest('.content-section').fadeOut();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content-section col-sm-6 col-md-5" id="div1">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsam voluptates! Harum odio porro temporibus nisi, amet maiores, rem nostrum sit vitae inventore officiis vel eius soluta atque velit.</p>
</div>
<div class="content-section col-sm-6 col-md-5 col-md-offset-2" id="div2">
<div class="cs-header"><p>HeaderX<i class="fa fa-close"></i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam, perferendis impedit, dolores quibusdam blanditiis id ipsum delectus minus eligendi repudiandae amet, velit voluptatum perspiciatis pariatur dicta aut mollitia cupiditate.</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-centered" id="div3">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque magnam quo quisquam, nesciunt, excepturi recusandae harum nisi? Ipsum vel explicabo ab, saepe sed animi ex quas. Voluptate, dicta, et.</p>
</div>
<div class="content-section col-sm-6 col-md-4 col-md-offset-1 col-centered" id="div4">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorum dicta molestias velit, quaerat cum reiciendis commodi rem alias maiores, quis optio quas quasi. Dolorem magnam laborum, nesciunt velit nobis?</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-md-offset-1 col-centered" id="div5">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae est quibusdam, repellendus quae ullam fugiat quos illum enim sit sunt itaque fugit alias ducimus soluta nihil, tenetur laudantium id, numquam.</p>
</div>

My proposal is:
$(function () {
$('div a[id^="close"]').on('click', function (e) {
var idNumber = this.id.split('').pop();
$(this).closest('#div' + idNumber).fadeOut();
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="content-section col-sm-6 col-md-5" id="div1">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex hic ipsam voluptates! Harum odio porro temporibus nisi, amet maiores, rem nostrum sit vitae inventore officiis vel eius soluta atque velit.</p>
</div>
<div class="content-section col-sm-6 col-md-5 col-md-offset-2" id="div2">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore numquam, perferendis impedit, dolores quibusdam blanditiis id ipsum delectus minus eligendi repudiandae amet, velit voluptatum perspiciatis pariatur dicta aut mollitia cupiditate.</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-centered" id="div3">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloremque magnam quo quisquam, nesciunt, excepturi recusandae harum nisi? Ipsum vel explicabo ab, saepe sed animi ex quas. Voluptate, dicta, et.</p>
</div>
<div class="content-section col-sm-6 col-md-4 col-md-offset-1 col-centered" id="div4">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis dolorum dicta molestias velit, quaerat cum reiciendis commodi rem alias maiores, quis optio quas quasi. Dolorem magnam laborum, nesciunt velit nobis?</p>
</div>
<div class="content-section col-sm-6 col-md-3 col-md-offset-1 col-centered" id="div5">
<div class="cs-header"><p>Header<i class="fa fa-close">X</i></p></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae est quibusdam, repellendus quae ullam fugiat quos illum enim sit sunt itaque fugit alias ducimus soluta nihil, tenetur laudantium id, numquam.</p>
</div>

$(document).ready(function(){
$('.btn-close').click(function){
$(this).parent().fadeOut();
});
});

bootstrap affix cover the div when use ScrollSpy because of position fix

bootstrap affix cover the div when use ScrollSpy because of position fix. Is there any option to get a certain space above the div to avoid cover the menu bar ?
Demo: http://codepen.io/anon/pen/vOyZGq
$(document).ready(function() {
$('#details-dropdown li a').click(function(e) {
console.log(e);
window.location = this.hash;
$("#details-menu li").removeClass("active");
$('#details-menu li a[href="' + $(this).attr('href') + '"]').parent().addClass('active');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<body data-spy="scroll" data-target="#mynav" style="padding-top:70px;">
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="collapse navbar-collapse" id="mynav">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>Details</li>
<li>Contact</li>
<li class="dropdown">
My details <b class="caret"></b>
<ul class="dropdown-menu" id="details-dropdown">
<li role="presentation" class="active">About</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12" id="home">
<div class="jumbotron form-group">
<h1>Hello, world!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non magnam eius voluptatum dignissimos aspernatur quas ab, consequuntur aliquid earum veniam. Fuga maiores possimus distinctio unde quae, corrupti perspiciatis adipisci, inventore!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non magnam eius voluptatum dignissimos aspernatur quas ab, consequuntur aliquid earum veniam. Fuga maiores possimus distinctio unde quae, corrupti perspiciatis adipisci, inventore!</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</div>
<div class="col-md-12" id="details">
<div class="page-header">
<h1>Details</h1>
</div>
<p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added within <code>#wrap</code> with <code>padding-top: 60px;</code> on the <code>.container</code>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam consequuntur vel repellat, quis eveniet, obcaecati, quod voluptatibus vero nobis non suscipit praesentium doloremque atque laudantium sint quidem. Perspiciatis ut, qui!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam consequuntur vel repellat, quis eveniet, obcaecati, quod voluptatibus vero nobis non suscipit praesentium doloremque atque laudantium sint quidem. Perspiciatis ut, qui!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam consequuntur vel repellat, quis eveniet, obcaecati, quod voluptatibus vero nobis non suscipit praesentium doloremque atque laudantium sint quidem. Perspiciatis ut, qui!</p>
<p>Back to the default sticky footer minus the navbar.</p>
</div>
<div class="col-md-12">
<h1>My details</h1>
<ul role="tablist" class="nav nav-tabs" id="details-menu">
<li role="presentation" class="active">About</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="myabout">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
</div>
<div role="tabpanel" class="tab-pane" id="myprofile">
<h2>Profile</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
</div>
<div role="tabpanel" class="tab-pane" id="mymessage">
<h2>Message</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur cupiditate natus quos incidunt pariatur saepe laudantium minima ipsam vero, illum vitae sint nisi consequuntur tempore repudiandae magnam placeat, quidem dolorum?</p>
</div>
</div>
</div>
</div>
</div>
</body>

Categories

Resources