Develop Reference

how to open accordion if its inside filter by using anchor tag

I am stuck in some unusual situation. I want to redirect button to the specific page where there are multiple category filters of bike models and similar category models description is mentioned in another page with same kind of filter but the inside filter, there are multiple accordions according to models.
Whenever I am trying to redirect link to particular models and its accordion should open but it is redirecting to only first element. Here is code
I have tried with adding id after link but its not working because there is filter in between
// add attempt here
$(document).ready(function() {
$(".rm-box").hide();
});
$(document).ready(function(){
$(".button").click(function(){
var value = $(this).attr("data-filter");
if (value == "all")
{
$(".filters").hide('1000');
}
else
{
$(".filters").not("." + value).hide("1000");
$(".filters").filter("." + value).show("1000");
}
$("ul .button").click(function(){
$(this).addClass('active').siblings().removeClass('active');
})
})
})
$(document).ready(function() {
var hash = window.location.hash;
hash && $('ul.myfilter a[href="' + hash + '"]').panel-body('show');
});
/* add helpful css here */
ul.myfilter {
padding: 0;
position: relative;
width: 100%;
margin: 10px 10px 30px;
}
.myfilter>li {
list-style: none;
float: left;
padding: 10px 20px;
color: #ffffff;
margin-right: 15px;
font-family: 'Oswald';
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
font-size: 24px;
}
.myfilter>li:hover, .active {
color: #ff6501!important;
font-size: 30px!important;
}
.filter-cont{
padding: 0 30px;
position: relative;
padding: 30px;
box-sizing: border-box;
background-color: #000000;
width: 100%;
margin: 0;
}
.iron-883{
height:400px;
width: 100%;
background-size: cover;
background-position: 50%;
}
.acco-title:hover {
text-decoration: none;
}
.acco-title {
font-family: 'Montserrat';
font-weight: 700;
color: #ff6501 !important;
font-size: 24px;
text-transform: uppercase;
}
.colorview{
position: relative;
background-color: #363636;
width: 40%;
height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<ul class="myfilter">
<li class="button active" data-filter="sportster">Sportster</li>
<li class="button" data-filter="street">Street</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
<div style="clear: both;"></div>
</ul>
<div class="box filters sportster">
<div class="row">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img iron-883">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>IRON 883</h4>
<a class="orng-btn filt-bike-link" href="hdmodels.html#collapse1">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img forty-8">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>FORTY EIGHT</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse2">Know More</a>
</div>
</div>
</div>
<div class="row hd-sportster">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img custom-1200">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>1200 CUSTOM</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse3">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img hd-roadster">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>ROADSTER</h4>
<a class="orng-btn filt-bike-link" href="hdmodels.html">Know More</a>
</div>
</div>
</div>
</div>
<ul class="myfilter">
<li class="button active" data-filter="street">Street</li>
<li class="button" data-filter="sportster">Sportster</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
<div style="clear: both;"></div>
</ul>
<div class="box filters street">
<div class="panel-group" id="streetaccordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse1" class="acco-title">Harley-Davidson Street-750</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Some Code
</div>
</div>
</div>
</div>
</div>

I am not going to try to figure out ALL your functionality but just address the question. Note where the element with id collapse2 is open when this is ran.
I used this reference: https://getbootstrap.com/docs/4.0/components/collapse/
I altered some CSS etc. just to show it better in this limited context more clearly. You were close but the key is the selector and then trigger the show event. These are the key lines: (comments in the code, note where they are placed)
let hash = window.location.hash;
$('#' + hash).collapse('show');
Side note, I moved these outside the UL since a UL can only contain li or a nested list item and added a class instead of in-line style:
<div class="clear-things"></div>
Reference https://www.w3.org/TR/html401/struct/lists.html#h-10.2
$(function() {
//$(".rm-box").hide();
$("ul.myfilter").find(".button").on('color-siblings', function(event) {
$(this).addClass('active').siblings().removeClass('active');
}).on('click', function(event) {
let filters = $(".filters");
let value = $(this).data("filter");
if (value == "all") {
filters.hide('1000');
} else {
filters.not("." + value).hide("1000");
filters.filter("." + value).show("1000");
}
$(this).trigger('color-siblings');
});
// code that toggles the collapse in the document ready event handler
// could also be a custom event trigger like I show for the color above
let hash = window.location.hash;
hash = "collapse2"; // just to test - get hash as above
// assumption of ID here thus the '#', ID MUST be unique so that is OK
$('#' + hash).collapse('show');
});
/* add helpful css here */
div>ul.myfilter {
background-color: #333333;
border: solid 1px lime;
}
/*so we see it */
ul.myfilter {
padding: 0;
position: relative;
width: 100%;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 30px;
}
.myfilter>li {
list-style: none;
float: left;
padding-top: 1em;
padding-right: 1.2em;
color: #0165ff;
margin-right: 0.25em;
font-family: 'Oswald';
font-weight: 700;
text-transform: uppercase;
cursor: pointer;
font-size: 1.2em;
}
.myfilter>li:hover,
.active {
color: #ff6501!important;
}
.filter-cont {
padding: 0 30px;
position: relative;
padding: 30px;
box-sizing: border-box;
background-color: #000000;
width: 100%;
margin: 0;
}
.iron-883 {
height: 10px;
width: 100%;
background-size: cover;
background-position: 50%;
}
.acco-title:hover {
text-decoration: none;
}
.acco-title {
font-family: 'Montserrat';
font-weight: 700;
color: #ff6501 !important;
font-size: 24px;
text-transform: uppercase;
}
.colorview {
position: relative;
background-color: #363636;
width: 40%;
height: 500px;
}
.clear-things {
clear: both;
}
.panel-body {border:solid blue 1px;}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<ul class="myfilter">
<li class="button active" data-filter="sportster">Sportster</li>
<li class="button" data-filter="street">Street</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
</ul>
<div class="clear-things"></div>
<div class="box filters sportster">
<div class="row">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img iron-883">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>IRON 883</h4>
<a class="orng-btn filt-bike-link" href="#collapse1">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img forty-8">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>FORTY EIGHT</h4>
<a class="white-btn filt-bike-link" href="#collapse2">Know More</a>
</div>
</div>
</div>
<div class="row hd-sportster">
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img custom-1200">
</div>
<div class="col-md-2 cmn-fit-txt orng-rhs">
<h4>1200 CUSTOM</h4>
<a class="white-btn filt-bike-link" href="hdmodels.html#collapse3">Know More</a>
</div>
</div>
<div class="col-md-6 col-xs-12 common-for-all">
<div class="col-md-4 cmn-fit-img hd-roadster">
</div>
<div class="col-md-2 cmn-fit-txt wh-rhs">
<h4>ROADSTER</h4>
<a class="orng-btn filt-bike-link" href="#collapse3">Know More</a>
</div>
</div>
</div>
</div>
<ul class="myfilter">
<li class="button active" data-filter="street">Street</li>
<li class="button" data-filter="sportster">Sportster</li>
<li class="button" data-filter="softail">Softail</li>
<li class="button" data-filter="touring">Touring</li>
<li class="button" data-filter="cvo">Cvo</li>
</ul>
<div class="clear-things"></div>
<div class="box filters street">
<div class="panel-group" id="streetaccordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse1" class="acco-title">Harley-Davidson Street-750</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Some Code 750 CC
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#streetaccordion" href="#collapse2" class="acco-title">Harley-Davidson Forty Eight</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body">
Some Code Forty Eight Cheese bits
</div>
</div>
</div>
</div>
</div>
</div>

Responsive custom expanding preview

I am trying to build an expanding preview like http://tympanus.net/Tutorials/ThumbnailGridExpandingPreview/.
But I need to customize it based on my requirement.
Please check this fiddle.
Problems I am facing are:
The pointer does not point to the image properly. (it points but hides behind the box)
When clicking on first image, all the elements to the right shifts down.
Along with that I would also like to ask, can we fit all the 8 circular div in a single row?
Thank you.
jQuery(document).ready(function() {
$(".mn").click(function() {
var activeTab = $(this).attr("href"); //Find the target via the href
if ($(activeTab).is(':visible')) {
$(activeTab).slideUp();
$(this).removeClass("active");
} else {
$(".mn").removeClass("active"); //Remove any "active" class
$(this).addClass("active")
$('.tab').hide();
$(activeTab).fadeIn();
}
return false;
});
});
.wrap {
max-width: 100%;
margin: auto;
}
.mn.active:after {
content: "";
position: absolute;
left: 50%;
bottom: -12px;
margin: 0 0 0 -6px;
/*width: 0;*/
/*height: 0;*/
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid red;
}
.img-circle {
border-radius: 50%;
}
.img-circle {
border-radius: 0;
}
.ratio {
background-position: center center;
background-repeat: no-repeat;
background-size: auto;
height: 0;
padding-bottom: 100%;
position: relative;
width: 100%;
}
.img-circle {
border-radius: 50%;
}
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
.mn.active,
.mn:focus {
background: #f9f9f9;
outline: none
}
.tab {
display: none;
clear: both;
margin: 0 2% 10px 0;
background: red;
min-height: 100px;
width: 100%;
padding: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="wrap">
<div class="col-sm-2">
<a href="#tab1" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">1</div>
</a>
</div>
<div id="tab1" class="tab">Tab 1</div>
<div class="col-sm-2">
<a href="#tab2" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">2</div>
</a>
</div>
<div id="tab2" class="tab">Tab 2</div>
<div class="col-sm-2">
<a href="#tab3" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">3</div>
</a>
</div>
<div id="tab3" class="tab">Tab 3</div>
<div class="col-sm-2">
<a href="#tab4" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">4</div>
</a>
</div>
<div id="tab4" class="tab">Tab 4</div>
<div class="col-sm-2">
<a href="#tab5" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">5</div>
</a>
</div>
<div id="tab5" class="tab">Tab 5</div>
<div class="col-sm-2">
<a href="#tab6" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">6</div>
</a>
</div>
<div id="tab6" class="tab">Tab 6</div>
<div class="col-sm-2">
<a href="#tab7" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">7</div>
</a>
</div>
<div id="tab7" class="tab">Tab 7</div>
<div class="col-sm-2">
<a href="#tab8" class="mn">
<div class="ratio img-responsive img-circle" style="background-image: url(/img/analytics.png); background-color: #FFC107;"></div>
<div class="text-center">8</div>
</a>
</div>
<div id="tab8" class="tab">Tab 8</div>
</div>

Please check this fiddle: https://jsfiddle.net/LyL8vkmr/4/
I put each col-sm-2 inside a <div class="row"></div> and I put all the tabs in a separate <div class="row"></div>. Now when you click a circle, it opens a tab in the row underneath it and pushes all the circles in the next row. However it still doesn't work perfectly because when you resize it to small size and click on a circle, the tab opens up at the very bottom of the row and you can't see it easily.
Also note I changed col-sm-2 to col-sm-1 since you said you wanted 8 divs in a row. The only problem with this is that it doesn't stretch 100% across. If you want 8 columns to stretch all the way across then you need to use a custom version of bootstrap. Just go here and enter 8 for the #grid-columns field.

jquery load tab-content onclick

These are chrome-like tabs. In this when i click on first tab i.e. facebook tab it shows facebook content and when i click on second tab i.e. on twitter tab it shows first tab's content and while clicking on third fourth and fifth tabs it shows their own content, there is no noissue with third fourth and fifth tabs.
And when clicking second time on first tab it shows no content. same is the issue with second tab.
HTML
<div class="box box-primary">
<div class="row">
<div class="col-md-12">
<div class="tabs">
<div class="tab fb-icon-color active" id="#tab1">
<a href="#tab1">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;" class="facebook">
<i class="fa fa-facebook" title="Facebook"></i>
</h3>
</div>
</a>
</div>
<div class="tab twitter-icon-color">
<a href="#tab2">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-twitter" title="Twitter"></i></h3>
</div>
</a>
</div>
<div class="tab google-plus-icon-color">
<a href="#tab3">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-google-plus" title="Google+"></i></h3>
</div>
</a>
</div>
<div class="tab crawl-icon-color">
<a href="#tab4">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-bug" aria-hidden="true" title="Crawling"></i>
</div>
</a>
</div>
<div class="tab video-icon-color">
<a href="#tab5">
<div class="tab-box">
<h3 style="text-align: center;margin-top: 15px;"><i class="fa fa-video-camera" title="Youtube"></i></h3>
</div>
</a>
</div>
</div>
<div class="tabs-content pane">
<!-- first Pane -->
<div id="tab1" >
<%= render :partial =>"fb_tab"%>
</div>
<div id="tab2" style="display: none;">
<%= render :partial =>"twitter_tab"%>
</div>
<div id="tab3" style="display: none;">
<%= render :partial =>"gplus_tab"%>
</div>
<div id="tab4" style="display: none;">
<%= render :partial =>"crawled_tab"%>
</div>
<div id="tab5" style="display: none;">
<h1> youtube</h1>
</div>
</div>
</div>
</div>
JAVASCRIPT
<script>
$(document).ready(function (){
$('.tab').click(function(){
$('.tab').removeClass('active');
$(this).addClass('active');
$(".tabs a").click(function() {
$(".pane div").hide();
$($(this).attr("href")).show();
});
});
});
</script>
CSS
.tabs {
height:45px;
padding: 1px 0 0 0;
overflow:visible;
}
.tab {
width:246px;
height:45px;
overflow:hidden;
float:left;
margin:0 -15px 0 0;
}
.tab-box {
height:50px;
background: rgba(60, 141, 188, 0.87);
border-radius: 4px;
border:1px solid #ccc;
margin:0 13px 0;
box-shadow: 0 0 2px #fff inset;
-webkit-transform: perspective(100px) rotateX(30deg);
-moz-transform: perspective(100px) rotateX(30deg);
}
.tab.active {
z-index:40;
position:relative;
padding-bottom:1px;
}
.tab.active .tab-box{
background-color: #ECF0F5;
#include background-image(linear-gradient(top, #ccc , #ddd 3%, rgba(#eee, 0.5) ));
box-shadow: 0 0 2px 0 #fff inset;
}
.tabs-content.pane {
z-index:1;
padding:15px;
border:1px solid #ccc;
background:#ECF0F5;
}

The problem is that you have nested click handlers, please try this:
$(document).ready(function() {
$(".tabs a").click(function(event) {
event.preventDefault();
$('.tab').removeClass('active');
$(this).parent().addClass('active');
$(".pane div").hide();
$($(this).attr("href")).show();
});
});

how to make bootstrap popover like google app launch button?

How to make a range item inside bootstrap popover? I want to make it the exact same as the google app launch button as the following image:
I played around CSS and Try to get it as close as possible, but it seems I am doing it in a wrong way. https://jsfiddle.net/ueskyj1u/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<style type="text/css">
#import "compass/css3";
.popover-content {
overflow-y: scroll;
height: 200px;
}
.popover-footer {
margin: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: 400;
line-height: 18px;
background-color: #F7F7F7;
border-bottom: 1px solid #EBEBEB;
border-radius: 5px 5px 0 0;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
background: tomato;
/* padding: 13px;*/
width: 74px;
;
height: 83px;
margin-top: 2px;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
}
/*---------------------*/
#General {
background: #383a35;
}
#sale {
background: #ffde6b;
}
#Servicing {
background: #762963;
}
#Purchasing {
background: #22d65b;
}
#Billing {
background: #67a0e1;
}
#Accounts {
background: #a22ee3;
}
#GST {
background: #39c5ac;
}
#StockControl {
background: #ef5836;
}
#System {
background: #69cbf5;
}
</style>
<body>
<div>
<!-- <div class="flex-container">
<div id="General" class="flex-item"> 1
<div class="glyphicon glyphicon-envelope"> </div>
</div>
<div id="sale" class="flex-item">
<div class=" glyphicon glyphicon-ok"> </div> 2</div>
<div id="Servicing" class="flex-item">
<div class="glyphicon glyphicon-globe "> </div> 3</div>
<div id="Purchasing" class="flex-item">
<div class="glyphicon glyphicon-envelope"> </div> 4</div>
<div id="Billing" class="flex-item">
<div class=" glyphicon glyphicon-usd"> </div> 5</div>
<div id="Accounts" class="flex-item">
<div class=" glyphicon glyphicon-user"> </div> 6</div>
<div id="GST" class="flex-item">
<div class=" glyphicon glyphicon-stats"> </div> 7</div>
<div id="StockControl" class="flex-item">
<div class="glyphicon glyphicon-envelope"> </div> 8</div>
<div id="StockControl" class="flex-item">
<div class="glyphicon glyphicon-cog"> </div> 8</div>
</div>
-->
</div>
click me to see popover
<script type="text/javascript">
$("[rel=details]").popover({
trigger: 'click',
placement: 'bottom',
html: 'true',
content: '<div class="flex-container"><div id="General" class="flex-item"> 1<div class="glyphicon glyphicon-envelope"></div></div><div id="sale" class="flex-item"><div class=" glyphicon glyphicon-ok"> </div> 2</div><div id="Servicing" class="flex-item"><div class="glyphicon glyphicon-globe "> </div> 3</div><div id="Purchasing" class="flex-item"><div class="glyphicon glyphicon-envelope"></div>4</div><div id="Billing" class="flex-item"><div class=" glyphicon glyphicon-usd"> </div> 5</div><div id="Accounts" class="flex-item"><div class=" glyphicon glyphicon-user"> </div>6</div><div id="GST" class="flex-item"><div class=" glyphicon glyphicon-stats"> </div>7</div><div id="StockControl" class="flex-item"><div class="glyphicon glyphicon-envelope"></div> 8</div><div id="StockControl" class="flex-item"><div class="glyphicon glyphicon-cog"> </div> 8</div></div>',
template: '<div class="popover"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>'
});
</script>
</body>
</html>

Do changes in popup template
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
<div class="footer">
<center>
<a href="" >more</a>
</center>
</div>
</div>
add class
.footer{
width: 101%;
margin-left: -0.5%;
background-color:rgba(128, 128, 128, 0.48);
margin-bottom:-1%;
border-bottom-right-radius: 16%;
border-bottom-left-radius: 16%;
}
https://jsfiddle.net/ueskyj1u/1/

Auto-scroll to a div when clicking on another div

When I click on one of the smaller divs on the left (inside of the div with the class "smallitems", I want for the div on the right (with the class "items") to auto-scroll to the appropriate larger div.
HTML:
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
JavaScript (with JQuery):
$('.smallitems .col').on("click", function(){
//how use scroll items show
});
Example:
This is before I click on a div in the left div ("smallitems").
I've now clicked on the number 5 (<div class="col">5</div>) in the left div. As you can see the right div has scrolled to the 5th div (<div class="item">5</div>).
Similar to the above, I've clicked on the number 4, and subsequently have had the right div auto-scroll to the 4th div.
see jfiddle http://jsfiddle.net/h7bLK/

This can be done with anchors. If you replace your div.cols with anchor tags and add an ID to your div.items like this:
<div class="smallitems">
<a class="col" href="#item1">1</a>
<a class="col" href="#item2">2</a>
. . .
</div>
<div class="items">
<div class="item" id="item1">1</div>
<div class="item" id="item2">2</div>
. . .
</div>
Fiddle link
BONUS: You'll be able to link externally to the correct item.
CONS: If the content is smaller than the frame it is rendered in, the whole frame will scroll.

According to requirement, no-need to use javascript or jquery. Its done only using css.
<div class="main-container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col last-child">3</div>
<div class="col">4</div>
<div class="col">5 </div>
<div class="col last-child">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items">
<div class="scroll">
<div class="item" id="one">1</div>
<div class="item" id="two">2</div>
<div class="item" id="three">3</div>
<div class="item" id="four">4</div>
<div class="item" id="five">5</div>
<div class="item" id="six">6</div>
<div class="item" id="seven">7</div>
<div class="item" id="eight">8</div>
</div>
</div>
</div>
**Css** :
.main-container{
margin: 20px auto;
width:960px;
overflow: hidden;
border: 1px solid #bababa;
padding: 5px;
}
.smallitems{
overflow: hidden;
float: left;
width:330px;
border: 1px solid #bababa;
display: table;
padding: 10px;
}
.col a{
display: block;
padding: 41px 0;
text-decoration: none;
}
.col{
float:left;
display: table-cell;
vertical-align: middle;
text-align: center;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid #bababa;
height: 100px;
width: 100px;
margin: 0 10px 10px 0;
}
.items{
float: right;
width:580px;
border: 1px solid #bababa;
overflow-y: hidden;
white-space: nowrap;
padding: 10px;
}
.col:nth-child(3),.last-child{
margin-right: 0;
}
.item{
display: inline-block;
text-align: center;
position:relative;
font-size: 14px;
font-weight: 700;
border: 1px solid #bababa;
height: 440px;
width: 180px;
margin: 0 10px 10px 0;
}

$('.smallitems .col').on("click", function(){
var index = $(this).index();
var items = $('.items');
var item = items.children().eq(index);
items.scrollLeft((item.width() - 50) * index);
});
When you add a new div to the items play around with the value of 50.

<div class="container">
<div class="smallitems">
<div class="col">1</div>
<div class="col"> 2 </div>
<div class="col"> 3</div>
<div class="col">4</div>
<div class="col"> 5 </div>
<div class="col">6 </div>
<div class="col"> 7</div>
<div class="col">8</div>
</div>
<div class="items" id="maindiv"> // set id
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">5</div>
</div>
</div>
$('.smallitems').on("click", function(e){
// get click element text and calculate scrollLeft
var scrollLeft = (parseInt($(e.target).text())-1) * 200;
// use jquery animation function
$('#maindiv').animate({scrollLeft :scrollLeft},1100)
});