We Keep Coding

How can I filter Bootstrap cards with the use of a button?

how would I go about filtering cards with the click of a button?
I'd want to create a function in java script and link it to the button, but I'm not sure on how I'd filter the cards through this method.
Say I click the Museum button, I want all cards that feature Museum to stay and all cards that don't to disappear.
Thanks for any help.
(HTML could use some brushing up but it's only a mock up so far)
<div class="buttons">
<h2><b>Choices:</b></h2>
<button onclick="blank()">Clear</button>
<button onclick="">Museums</button>
<button onclick="">Bars</button>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4 space-top">
<div class="card" style="width: 18rem;">
<img src="img/sher.jpg" class="card-img-top" alt="sher">
<div class="card-body">
<h5 class="card-title">Sheridans</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
Go here
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 space-top">
<div class="card" style="width: 18rem;">
<img src="img/mus.jpg" class="card-img-top" alt="mus">
<div class="card-body">
<h5 class="card-title">Museum</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
Go here
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 space-top">
<div class="card" style="width: 18rem;">
<img src="img/dock.jpg" class="card-img-top" alt="dock">
<div class="card-body">
<h5 class="card-title">Docks</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
Go here
</div>
</div>
</div>
</div>
<!-- end Rows -->
</div>
<!-- end Container -->
<script src="js/Cho_script.js"></script>

the easiest way is to just add a class to each of your cards, either museum or notMuseum and then grab the notMuseum cards. Alternatively you can grab all cards and then filter based on the content of card-title but that seems more complicated.
const toggleThese = document.getElementsByClassName('notMuseum')
for (let i = 0; i < toggleThese.length; i++) {
toggleThese[i].style.display = 'block'
}
function toggleMe() {
for (let i = 0; i < toggleThese.length; i++) {
if (toggleThese[i].style.display == 'block') {
toggleThese[i].style.display = 'none'
} else {
toggleThese[i].style.display = 'block'
}
}
}
<div class="buttons">
<h2><b>Choices:</b></h2>
<button onclick="blank()">Clear</button>
<button onclick="toggleMe()">Museums</button>
<button onclick="">Bars</button>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4 space-top">
<div class="card notMuseum" style="width: 18rem;">
<img src="img/sher.jpg" class="card-img-top" alt="sher">
<div class="card-body">
<h5 class="card-title">Sheridans</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
Go here
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 space-top">
<div class="card Museum" style="width: 18rem;">
<img src="img/mus.jpg" class="card-img-top" alt="mus">
<div class="card-body">
<h5 class="card-title">Museum</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
Go here
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 space-top">
<div class="card notMuseum" style="width: 18rem;">
<img src="img/dock.jpg" class="card-img-top" alt="dock">
<div class="card-body">
<h5 class="card-title">Docks</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
Go here
</div>
</div>
</div>
<!-- end Rows -->
</div>
<!-- end Container -->
<script src="js/Cho_script.js"></script>
And here's how to do it using filter:
const cardObjects = document.getElementsByClassName('card')
var cardArray = Object.values(cardObjects)
function checkMuseum(item) {
const cardTitle = item.getElementsByClassName('card-title')[0]
if (cardTitle.textContent != 'Museum')return item;
}
function myFunction() {
var notMuseum = cardArray.filter(checkMuseum);
for(let i = 0; i<notMuseum.length;i++){
if(notMuseum[i].style.display == ''|| notMuseum[i].style.display=='block'){
notMuseum[i].style.display='none';
}else{
notMuseum[i].style.display='block';
}
}
}
<div class="buttons">
<h2><b>Choices:</b></h2>
<button onclick="blank()">Clear</button>
<button onclick="myFunction()">Museums</button>
<button onclick="">Bars</button>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4 space-top">
<div class="card notMuseum" style="width: 18rem;">
<img src="img/sher.jpg" class="card-img-top" alt="sher">
<div class="card-body">
<h5 class="card-title">Sheridans</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
Go here
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 space-top">
<div class="card Museum" style="width: 18rem;">
<img src="img/mus.jpg" class="card-img-top" alt="mus">
<div class="card-body">
<h5 class="card-title">Museum</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
Go here
</div>
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4 space-top">
<div class="card notMuseum" style="width: 18rem;">
<img src="img/dock.jpg" class="card-img-top" alt="dock">
<div class="card-body">
<h5 class="card-title">Docks</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
Go here
</div>
</div>
</div>
<!-- end Rows -->
</div>
<!-- end Container -->

A simple way would be to add/remove the Bootstrap d-none class...
<button onclick="clearAll()">Clear</button>
<button onclick="filter('Museum')">Museums</button>
<button onclick="filter('Bar')">Bars</button>
var filter = (filter) => {
const cards = document.getElementsByClassName("col-sm-12");
for (let i = 0; i < cards.length; i++) {
let title = cards[i].querySelector(".card .card-body .card-title");
if (title.innerText.indexOf(filter) > -1) {
cards[i].classList.remove("d-none")
} else {
cards[i].classList.add("d-none")
}
}
}
var clearAll = () => {
cards = document.getElementsByClassName("col-sm-12")
for (i = 0; i < cards.length; i++) {
cards[i].classList.remove("d-none")
}
}
Demo

Why do we use the Intersection Observer API? Does it impact speed? Or Give me Some Advantages of using Intersection Observer

I Want to know why we use the intersection observer API. I want to load my page sections in an interval. Does it affect the page speed or not?
Below is my code. I'm confused why I'm using this when it has no effect on speed or any other things. I have an array of sections and a loader while threshold call.
Please explain to me why we are using this API while it has no advantage
const featureds = document.querySelectorAll(".featured");
const options = {
root: null,
threshold: 0.25,
rootMargin: '0px'
};
const observer = new IntersectionObserver(function(entries,observer) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
}
console.log(entry);
});
}, options);
featureds.forEach(featured => {
observer.observe(featured);
});
<div class="container featured 1">
<div class="row">
<div class="col-12">
<!-- <h4 class="team-name"></h4> -->
<h3 class="team-expert"><span>Feature Posts</span></h3>
<div class="feature-post">
<div class="container">
<div class="owl-carousel team-slider nospace group team">
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book1.png" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book2.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book5.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book3.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book7.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- feature posts ends -->
<!-- popular posts starts -->
<div class="container featured 2">
<div class="row">
<div class="col-12">
<!-- <h4 class="team-name"></h4> -->
<h3 class="team-expert"><span>Popular Posts</span></h3>
<div class="popular-post">
<div class="container">
<div class="owl-carousel team-slider nospace group team">
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book8.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book2.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book5.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book3.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
<div class="item">
<div class="pdf-carousel"> <a class="imgover" href=""> <img src="image/book7.jpg" alt="Pdf Viewer">
<div class="middle">
<div class="text">William Shakespeare <br>
Edition: <span>1st</span></div>
</div>
</a>
<div class="item-text">
<h4 title="Lorem ipsum doler sit amet">Lorem ipsum dolor sit amet.</h4>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Using an image inside a bootstrap panel to hyperlink to a tab

I'm trying to use an image inside a tab on bootstrap to hyperlink into a different panel/tab. For instance, in the code below, I want to hyperlink the first image in the all tab to open the tab/panel Branding. Is this possible? So far I tried to use an anchor tag of the panel Id but it's not working.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href='//cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container mt-5">
<!--Section: Content-->
<section class="dark-grey-text text-center">
<style>
.md-pills .nav-link.active {
background-color: #3f51b5;
}
</style>
<!-- Section heading -->
<h3 class="font-weight-bold mb-4 pb-2">Our best projects</h3>
<!-- Section description -->
<p class="text-muted w-responsive mx-auto mb-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum quas, eos officia maiores ipsam ipsum dolores reiciendis ad voluptas, animi obcaecati adipisci sapiente mollitia. </p>
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-12">
<!-- Nav tabs -->
<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
<li class="nav-item">
<a class="nav-link active font-weight-bold" data-toggle="tab" href="#panel31" role="tab">ALL</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">BRANDING</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">PACKAGING</a>
</li>
<li class="nav-item">
<a class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">PRINT DESIGN</a>
</li>
</ul>
</div>
<!--First column-->
</div>
<!--First row-->
<!--Tab panels-->
<div class="tab-content">
<!--Panel 1-->
<div class="tab-pane fade show in active" id="panel31" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="panel32" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project4.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project5.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel33" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project3.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project6.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 3-->
<!--Panel 4-->
<div class="tab-pane fade" id="panel34" role="tabpanel">
<!--First row-->
<div class="row">
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project1.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--First column-->
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project7.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Second column-->
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<div class="view overlay zoom z-depth-2">
<img src="https://mdbootstrap.com/img/Photos/Others/project8.jpg" class="img-fluid">
</div>
<p class="text-uppercase text-center font-weight-bold text-muted my-4">Lorem ipsum dolor sit
amet</p>
</div>
<!--Third column-->
</div>
<!--First row-->
</div>
<!--Panel 4-->
</div>
<!--Tab panels-->
</section>
</div>

Basically you need to wrap your featured images with anchor tags, and on their clicks, find those nav links inside the nav tabs and trigger their clicks.
First, add an ID for those nav tab links you want those images to trigger the clicks for. Later I can wrap the images with anchor tags and set their href to javascript:document.getElementById().click(); to trigger nav link's clicks.
I've tried to use javascript:document.querySelector(a[href="#xxx"]).click(); but for some reason that didn't work out.
<!-- Nav tabs -->
<ul class="nav md-pills flex-center flex-wrap mx-0" role="tablist">
<li class="nav-item">
<a class="nav-link active font-weight-bold"
data-toggle="tab" href="#panel31" role="tab">
ALL
</a>
</li>
<li class="nav-item">
<a id="branding-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel32" role="tab">
BRANDING
</a>
</li>
<li class="nav-item">
<a id="packaging-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel33" role="tab">
PACKAGING
</a>
</li>
<li class="nav-item">
<a id="print-design-tab-link"
class="nav-link font-weight-bold" data-toggle="tab" href="#panel34" role="tab">
PRINT DESIGN
</a>
</li>
</ul>
And then the rest is just to wrap featured images with anchor tags and set their hrefs:
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('branding-tab-link').click();">
<div />
<p />
</a>
</div>
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('packaging-tab-link').click();">
<div />
<p />
</a>
</div>
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a href="javascript:document.getElementById('print-design-tab-link').click();">
<div />
<p />
</a>
</div>
You can also write some custom jQuerys and bind image clicks to trigger nav tab link clicks. I just thought people might like achieving this without writing any additional JavaScripts separately.
demo: https://jsfiddle.net/davidliang2008/q9ztuv4w/8/
Scoll to the top after click?
Yea it's possible, but now instead of inline JavaScript, it makes more sense to write some custom JavaScripts to listen to the clicks, triggers nav link and do the scrolling.
<!--First column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Featured image-->
<a data-nav-link-id="#branding-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
<!--Second column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a data-nav-link-id="#packaging-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
<!--Third column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Featured image-->
<a data-nav-link-id="#print-design-tab-link" href="#" class="reference-link">
<div />
<p />
</a>
</div>
$(function() {
$('a.reference-link').click(function(){
// Get the nav link id from data attribute
let navLinkId = $(this).data('nav-link-id');
// Simulate the click on nav link
$(navLinkId).trigger('click');
// Scroll the document body to the top
$(body).scrollTop();
// Disable original click event on the reference-link
return false;
});
});
demo: https://jsfiddle.net/davidliang2008/q9ztuv4w/20/

This is the way to navigate to a tab by clicking any as requested:
https://jsfiddle.net/contactmikebray/Ldhpnqwg/
Summary:
Bootstrap uses jQuery so you can take advantage of the .click() event that is provided. Listen for an click on all image elements (can be replaced with other selectors). When an image is clicked, prop the tab show event.
<script type="text/javascript">
$(document).ready(function() {
$("img").click(function() {
$('.nav a[href="#panel32"]').tab('show');
})
});
</script>
Similar to:
Changing active Bootstrap 3 tab using jQuery

Targeting single set of repeating elements using jQuery

I am trying to create individual toggle for elements to show / hide.
All similar elements are responding to the action. How do I make this work for one particular set only? All the similar sections are getting toggled currently
Heres a fiddle of what I have created
https://jsfiddle.net/bqu0hznf/
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary panel-custom">
<div class="panel-heading">
<div class="img-wrap">
<img src="http://placehold.it/50x50">
</div>
<div class="content-wrap">
<h4 class="panel-title">Basic panel example</h4>
<p>Lorem ipsum dolor blah blah blah....</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary panel-custom">
<div class="panel-heading">
<div class="img-wrap">
<img src="http://placehold.it/50x50">
</div>
<div class="content-wrap">
<h4 class="panel-title">Basic panel example</h4>
<p>Lorem ipsum dolor blah blah blah....</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary panel-custom">
<div class="panel-heading">
<div class="img-wrap">
<img src="http://placehold.it/50x50">
</div>
<div class="content-wrap">
<h4 class="panel-title">Basic panel example</h4>
<p>Lorem ipsum dolor blah blah blah....</p>
</div>
</div>
</div>
</div>
</div>
<script>
$('.acc-toggle').click(function() {
$( '.panel-custom p , .panel-custom .img-wrap img' ).fadeToggle('fast', 'linear');
});
</script>

Use $(this).closest('.panel-custom') to find ancestor .panel-custom and then find p, .img-wrap img inside it like following.
$('.acc-toggle').click(function() {
$(this).closest('.panel-custom').find('p, .img-wrap img').fadeToggle('fast', 'linear');
});
UPDATED FIDDLE

Extending Templates: Uncaught SyntaxError: Unexpected token <

Getting several errors of type "Uncaught SyntaxError: Unexpected token < " when I load the same template with a different request.
My project url:
url(r'^$', 'larkspur.views.home', name='home'),
url(r'^test/', 'larkspur.views.home', name='home'),
My app view:
def home(request):
return render_to_response('larkspur/index.html', context, context_instance=RequestContext(request))
When I load mysite.com/ everything loads fine. When I load mysite.com/test things get a little whacky First, I get several "Uncaught SyntaxError: Unexpected token < ". Additionally, some javascript doesn't seem to function correctly, though it appears to load fully.
Any guesses or help would be greatly appreciated. Possibly relevant code below:
index.html (modified from a purchased/licensed HTML5 template):
{% extends "larkspur/base.html" %}
{% block content %}
<!-- CONTENT BEGIN -->
<div id="content" class="">
<div class="inner">
<div class="block_slider_type_1 general_not_loaded">
<div id="slider" class="slider flexslider">
<ul class="slides">
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_1.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Travel, PHOTOGRAPHY</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Mountains in Switzerland</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_2.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Travel, PHOTOGRAPHY</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">My Love - New York</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_3.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Life, PHOTOGRAPHY</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">My Awesome workplace</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_4.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Life, PHOTOGRAPHY</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Flying over the mountains</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_5.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">People, Fashion</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Young Businessman</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
<li>
<img src="{{ STATIC_URL }}larkspur/images/pic_slider_1_6.jpg" alt="">
<div class="animated_item text_1_1" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">People, Life</div>
<div class="animated_item text_1_2" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">The guy on the field</div>
<div class="animated_item text_1_3" data-animation-show="fadeInUp" data-animation-hide="fadeOutDown">Read More</div>
</li>
</ul>
</div>
<script type="text/javascript">
jQuery(function() {
init_slider_1('#slider');
});
</script>
</div>
<div class="block_general_title_1 w_margin_1">
<h1>Latest Posts</h1>
<h2>ENTER THE SUB TITLE FOR THIS SECTION</h2>
</div>
<div class="block_posts type_1 type_sort general_not_loaded">
<div class="posts">
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_1.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
<span>TOP NEWS.</span> Sed ut perspiciatis unde omnis iste natus sit volup.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_6.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Red ut perspiciatis unde omnis iste.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_11.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Perspiciatis unde omnis iste.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_7.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Totam rem aperiam, eaque ipsa quae ab illo inventore verit.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_12.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
<span>NEWS.</span> Totam rem aperiam, eaque ipsa quae ab illo inventore.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_2.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
</div>
</div>
</article>
<article class="post_type_3">
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_13.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Accusantium doloremque lauda ntium, totam.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_3.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_14.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Sed ut perspiciatis unde omnis iste natus sit volup.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_8.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Sed ut perspiciatis unde omnis iste natus sit volup.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="slider">
<div id="post_slider_1" class="flexslider">
<ul class="slides">
<li><img src="{{ STATIC_URL }}larkspur/images/pic_post_1_4.jpg" alt=""></li>
<li><img src="{{ STATIC_URL }}larkspur/images/pic_post_1_16.jpg" alt=""></li>
<li><img src="{{ STATIC_URL }}larkspur/images/pic_post_1_17.jpg" alt=""></li>
</ul>
</div>
<script type="text/javascript">
jQuery(function() {
init_post_slider_1('#post_slider_1');
});
</script>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
<span>TOP NEWS.</span> Quae ab illo inventore veritatis et quasi architecto beatae.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_9.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_10.jpg" alt=""><span class="hover no_icon"></span><span class="icon video"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
<span>TOP NEWS.</span> Totam rem aperiam, eaque ipsa quae ab illo inven.
</div>
</div>
</article>
<article class="post_type_2">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_15.jpg" alt=""><span class="hover"></span>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.
</div>
</div>
</article>
<article class="post_type_1">
<div class="feature">
<div class="image">
<img src="{{ STATIC_URL }}larkspur/images/pic_post_1_5.jpg" alt=""><span class="hover"></span>
</div>
<div class="review">
<div class="num">7.5</div>
<div class="type">score</div>
</div>
</div>
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Voluptatem sequi nesciunt.
</div>
</div>
</article>
<article class="post_type_3">
<div class="content">
<div class="info">
<div class="tags">TRAVEL, LIFE</div>
<div class="date">27, 2013</div>
<div class="stats">
<div class="likes">15</div>
<div class="comments">7</div>
</div>
</div>
<div class="title">
Accusantium doloremque laudantium, totam rem aperiam, eaqu.
</div>
</div>
</article>
</div>
<div class="controls">
<span>Load more posts</span>
</div>
</div>
</div>
</div>
<!-- CONTENT END -->
{% endblock %}