jQuery remove & add class on click

jQuery remove & add class on click - javascript

So I have this jQuery which allows me to click on a element and it will extended something that is hidden. But you can click on multiple elements and they will all be extended. I only want one to be extended at any one point... Could someone help me out?
if( $(window).width() >= 991 ) {
$('.brands-supply .single').click(function() {
$id = $(this).attr('href');
$($id).stop().slideDown('fast');
}, function() {
$($id).stop().slideUp('fast');
});
}
HTML
<div class="brands-supply hidden-sm hidden-xs">
<h2> Our Consultancy Services </h2>
<div class="container">
<div class="row">
<a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample0" style="background: #464648;" aria-expanded="false">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/cookies.png">
</a>
<a class="col-md-3 single collapsed" data-toggle="collapse" href="#collapseExample1" style="background: #5e5e5e;" aria-expanded="false">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/Brian.jpg">
</a>
<a class="col-md-3 single" data-toggle="collapse" href="#collapseExample2" style="background: #9a9a9a;">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/11/Executive_proection_services.jpg">
</a>
<a class="col-md-3 single" data-toggle="collapse" href="#collapseExample3" style="background: #cccccc;">
<img src="">
</a>
</div>
<div class="row">
<div class="col-md-12 collapse" id="collapseExample0" style="height: 0px; background: rgb(70, 70, 72);" aria-expanded="false">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Reviews</p>
<p> </p>
<p>This si a p tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample1" style="height: 0px; background: rgb(94, 94, 94);" aria-expanded="false">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Testing</p>
<p> </p>
<p>This is a ap tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample2" style="background: #9a9a9a;">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Projects</p>
<p> </p>
<p>This is a p tag</p>
</div>
</div>
</div>
</div>
<div class="col-md-12 collapse" id="collapseExample3" style="background: #cccccc;">
<div class="text">
<div class="row">
<div class="col-md-4">
<img src="http://localhost:8888/eclectic/wp-content/uploads/2015/10/consultancy_icon.png">
</div>
<div class="col-md-7">
<p>Services</p>
<p> </p>
<p>This is a Ptag</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Any help appreciated!

First click doesn't take two functions as parameters. You should use slideToggle.
if( $(window).width() >= 991 ) {
$('.brands-supply .single').click(
function() {
var id = $(this).attr('href');
$('.brands-supply .single').each(
function () {
var href = $(this).attr('href');
if (href == id) return;
$(href).slideUp('fast');
}
);
$(id).stop().slideToggle('fast');
}
);
}
So on click select all the elements you attached the click to and iterate over them sliding them up if they are not the current clicked href. Then just use slideToggle on the clicked one and it will slide it up or down based on how its currently displayed.
Fiddle: http://jsfiddle.net/AtheistP3ace/xkv31rop/
JS:
same as above
CSS:
div > div {
height: 100px;
width: 100%;
display: none;
}
#id1 {
background: red;
}
#id2 {
background: blue;
}
#id3 {
background: orange;
}
HTML:
<div class="brands-supply">
<a class="single" href="#id1">id1</a>
<a class="single" href="#id2">id2</a>
<a class="single" href="#id3">id3</a>
<div id="id1"></div>
<div id="id2"></div>
<div id="id3"></div>
</div>

Related

JQuery $(document).on("click") on mobile

I've made some research already online but I can't find any solution to my problem:
I've a web app which is using JQuery and bootstrap, on desktop is working as intended but when I try it on mobile (on Android I've tried Chrome an Brave) but it doesn't work on a single tap on the button but to trigger it need to long press until animation is finished
Here the front-end part and JQuery code:
$(document).on("click ", "#triggerCena", function(e) {
e.preventDefault();
$('#dettaglioCena').slideToggle("fast", function() {
delay = 0;
$('#dettaglioCena .cibo').each(function() {
if (!$(this).hasClass('animate__animated animate__bounceInLeft')) {
delay += 0.02;
$(this).css("animation-delay", delay + "s");
$(this).addClass('animate__animated animate__bounceInLeft');
$(this).css("visibility", "visible");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row animate__animated animate__zoomInDown" style="margin:0px;margin-top:15px;margin-bottom:15px;animation-delay:1s;">
<div class="col-2">
<img class="mx-auto d-block rounded" width="62" height="50" src="images/pictures/img_community/cena.jpg">
</div>
<div class="col-7">
<h1 style="color:white;margin-left:15px;font-size:20px;">Cena</h1>
</div>
<div class="col-1">
</div>
<div class="col-1" style="margin-right:10px;">
<i class="fa fa-plus addMeal" style="color:white;font-size:20px;" data-toggle="modal" value="3" data-target="#modalAlimenti"></i>
</div>
</div>
<div class="row bg-light-grey animate__animated animate__zoomInDown" style="margin:0px;margin-bottom:0px;animation-delay:1s;">
<div class="col-1">
</div>
<div class="col-6">
<i style="color:black;">4 Voci</i>
</div>
<div class="col-3">
</div>
<div class="col-1">
<a class="fa fa-angle-down" style="color:black;" id="triggerCena" role="button"></a>
</div>
</div>
<div class="collapse" id="dettaglioCena" style="display: none;">
<div class="row bg-light-grey" id="175" style="margin:0px;"></div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="176" style="margin: 0px; visibility: visible; animation-delay: 0.02s;">
<div class="col-4">
Grano saraceno </div>
<div class="col-3">
50 g </div>
<div class="col-3">
171 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="176"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="177" style="margin: 0px; visibility: visible; animation-delay: 0.04s;">
<div class="col-4">
Coniglio </div>
<div class="col-3">
150 g </div>
<div class="col-3">
295 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="177"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="178" style="margin: 0px; visibility: visible; animation-delay: 0.06s;">
<div class="col-4">
Broccoli </div>
<div class="col-3">
300 g </div>
<div class="col-3">
102 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="178"></i></div>
</div>
<div class="row bg-light-grey cibo animate__animated animate__bounceInLeft" id="179" style="margin: 0px; visibility: visible; animation-delay: 0.08s;">
<div class="col-4">
Olio di oliva </div>
<div class="col-3">
30 ml </div>
<div class="col-3">
265 Kcal
</div>
<div class="col-2"><i class="fa fa-trash removeMeal" value="179"></i></div>
</div>
</div>
I'm also using Animate.css to make animations.
I've already tried to add touchstart and touchend but nothing seems to change the behaviour.
Any help is very appreciated

Every tap comes with a delay, because it might be that someone is not really clicking but it's the start of a swipe, for example. This is why there's a delay and I think that's what you're talking about?
See here: https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away

how to float divs when using search filter bootstrap

I have created a gallery that gets filtered two ways. One by click of a button and the other with a search filter. Filters are working perfectly, except when divs are hidden on filter the remaining showing divs do not float next to each other.
this is what it looks like before filtered:
After filtering this is what it looks like:
How can I get it all of dancer2 to be next to each other and only start a new row every 4 dancers?
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(".column").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
.column {
float: right;
display: none;
/* Hide columns by default */
}
.content {
background-color: white;
padding: 10px;
text-align: center;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row container" style="margin: auto;">
<div class="col-sm-4">
<input type="text" id="myInput" placeholder="Search for names..">
</div>
<div class="col-sm-8" style="text-align: right;">
<div id="myBtnContainer" class="container" style="padding-bottom: 2rem;">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('teachera')"> teachera</button>
<button class="btn" onclick="filterSelection('teacherb')"> teacherb</button>
<button class="btn" onclick="filterSelection('teacherc')"> teacherc</button>
</div>
</div>
</div>
<!--DANCER GALLERY-->
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer1" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer2" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer3" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teachera</p>
</div>
</a>
</div>
<div class="col-sm-3 column teachera">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250" alt="Dancer4" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teachera</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer1a" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer2a" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer3a" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherb</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherb">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ff0000" alt="Dancer4a" style="width:80%; height: 200px;">
<h4>Dancer4</h4>
<p>teacherb</p>
</div>
</a>
</div>
</div>
<div class="row container" style="margin: auto; margin-bottom: 2rem;">
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer1b" style="width:80%; height: 200px;">
<h4>Dancer1</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer2b" style="width:80%; height: 200px;">
<h4>Dancer2</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer3b" style="width:80%; height: 200px;">
<h4>Dancer3</h4>
<p>teacherc</p>
</div>
</a>
</div>
<div class="col-sm-3 column teacherc">
<a href="#" class="link">
<div class="content">
<img src="http://placehold.it/175x250/ffff00" alt="Dancer4b" style="width:80%; height: 200px;">
<h4 class="dancerName">Dancer4</h4>
<p>teacherc</p>
</div>
</a>
</div>
</div>

When you declare a new div with the "row" class it will start a new row. If you want all of those elements to show side-by-side, they should all be in the same "row" div. The bootstrap styles will automatically keep a maximum of 4 pictures side-by-side and wrap to a new row (because you have col-sm-3 as the class for the individual pictures). Bootstrap rows go up to 12 units long. Each time a new element is added, if it exceeds the 12, it will wrap to the next line.

Bootstrap Accordion does not remain on the same tab, after copying the URL to other location

Below is the javascript & HTML code for Bootstrap accordion, that I am using in my Project.
Issue is: If user is on the 2nd Tab i.e., RELATED SOPs and then opens any of the nested tab inside it, and then copy the URL from the address bar and paste it to any another browser or another tab of same browser, then always nested tab of 1st Tab i.e., QESH MANUAL is opened in place of 2nd Tab & its nested tab (last opened by user).
EDIT
<script type="text/javascript">
$(document).ready(function () {
$("ul#tab li:first").addClass("aktif");
$("div.tab_icerik").hide();
$("div.tab_icerik:first").show();
$("ul#tab li").click(function (e) {
var index = $(this).index();
$("ul#tab li").removeClass("aktif");
$(this).addClass("aktif");
$("div.tab_icerik").hide();
$("div.tab_icerik:eq(" + index + ")").show();
return false
});
$(".tabv2").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv2-"]').hide();
$('.' + thisId).show();
$('.tabv2').removeClass('tabv2-active');
$(this).addClass('tabv2-active');
});
$(".tabv2plain").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv2plain-"]').hide();
$('.' + thisId).show();
$('.tabv2plain').removeClass('tabv2plain-active');
$(this).addClass('tabv2plain-active');
});
$(".tabv3plain").click(function () {
var thisId = $(this).attr('id');
var thatId = $(this).siblings().attr('id')
$('[class^="tabv3plain-"]').hide();
$('.' + thisId).show();
$('.tabv3plain').removeClass('tabv3plain-active');
$(this).addClass('tabv3plain-active');
});
});
</script>
<body>
<script>
function myFunction() {
window.location.hash = "#One";
//var a = "QESH MANUAL" + location.hash;
//document.getElementById("One").innerHTML = a;
}
function myFunction2() {
window.location.hash = "#Two";
}
function myFunction3() {
window.location.hash = "#collapseOne";
}
function myFunction4() {
window.location.hash = "#collapseOneOne";
}
function myFunction5() {
window.location.hash = "#collapseOneOne1";
}
function myFunction6() {
window.location.hash = "#collapseOneTwo";
}
function myFunction7() {
window.location.hash = "#collapseOneTwo1";
}
function myFunction8() {
window.location.hash = "#collapseOneTwo2";
}
function myFunction9() {
window.location.hash = "#collapseOneTwo3";
}
function myFunction10() {
window.location.hash = "#collapseOneTwo4";
}
function myFunction11() {
window.location.hash = "#collapseOneTwo5";
}
function myFunction12() {
window.location.hash = "#collapseOneTwo6";
}
function myFunction13() {
window.location.hash = "#collapseOneThree";
}
function myFunction14() {
window.location.hash = "#collapseOneThree1";
}
function myFunction15() {
window.location.hash = "#collapseOneFour";
}
function myFunction16() {
window.location.hash = "#collapseOneFour1";
}
function myFunction17() {
window.location.hash = "#collapseTwo";
}
function myFunction18() {
window.location.hash = "#collapseTwo1";
}
function myFunction19() {
window.location.hash = "#collapseThree";
}
function myFunction20() {
window.location.hash = "#collapseThree1";
}
function myFunction21() {
window.location.hash = "#collapseFour";
}
function myFunction22() {
window.location.hash = "#collapseFour1";
}
//2nd Tab Menus
function myFunction23() {
window.location.hash = "#collapseFive";
}
function myFunction24() {
window.location.hash = "#collapseFive1";
}
</script>
<div>
<div class="row" style="padding-top:5px">
<div class="col-md-12">
<ul id="tab">
<li class="">
<a onclick="myFunction()" href="#One">QESH MANUAL</a>
</li>
<li style="margin-left:3px;" class="aktif">
<a onclick="myFunction2()" href="#Two">RELATED SOPs</a>
</li>
</ul>
</div>
</div>
<div class="row" style="padding-top:5px">
<div class="tab_icerik" style="display: block;">
<div class="col-md-4">
<span style="display:block;">
<div id="accordionA1" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction3()" href="#collapseOne"> CONSTRUCTION</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<!-- SECOND LEVEL ACCORDION START -->
<div id="accordionA2" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction4()" href="#collapseOneOne">QESH MANUAL</a>
</h4>
</div>
<div id="collapseOneOne" class="panel-collapse collapse in">
<div class="panel-body">
<div class="group row clear" id="tabsv2plain">
<div class="tabv2plain tabv2plain-active" id="tabv2plain-1">
<a onclick="myFunction5()" href="#collapseOneOne1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction6()" href="#collapseOneTwo">PROCEDURES MANUALS</a>
</h4>
</div>
<div id="collapseOneTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div1">
<div class="tabv2plain" id="tabv2plain-2">
<a onclick="myFunction7()" href="#collapseOneTwo1">Tender & Contract Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-3">
<a onclick="myFunction8()" href="#collapseOneTwo2">Procurement Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-4">
<a onclick="myFunction9()" href="#collapseOneTwo3">Pre-Construction & Planning Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-5">
<a onclick="myFunction10()" href="#collapseOneTwo4">Project Implementation & Management Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-6">
<a onclick="myFunction11()" href="#collapseOneTwo5">Post-Construction Procedure Manual</a>
</div>
<div class="tabv2plain" id="tabv2plain-7">
<a onclick="myFunction12()" href="#collapseOneTwo6">Management System Administration Procedure Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction13()" href="#collapseOneThree">QESH POLICY</a>
</h4>
</div>
<div id="collapseOneThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div2">
<div class="tabv2plain" id="tabv2plain-8">
<a onclick="myFunction14()" href="#collapseOneThree1">QESH Policy</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordionA2" onclick="myFunction15()" href="#collapseOneFour">QESH OBJECTIVE</a>
</h4>
</div>
<div id="collapseOneFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div3">
<div class="tabv2plain" id="tabv2plain-9">
<a onclick="myFunction16()" href="#collapseOneFour1">QESH Objective</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- SECOND LEVEL ACCORDION END -->
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction17()" href="#collapseTwo">SUNWAY ENGINEERING </a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div4">
<div class="tabv2plain" id="tabv2plain-10">
<a onclick="myFunction18()" href="#collapseTwo1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction19()" href="#collapseThree">SUNWAY GEOTECHNICS </a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div5">
<div class="tabv2plain" id="tabv2plain-11">
<a onclick="myFunction20()" href="#collapseThree1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionA1" onclick="myFunction21()" href="#collapseFour">SUNWAY CONCRETE PRODUCTS </a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse">
<div class="panel-body">
<div class="group row clear" id="Div6">
<div class="tabv2plain" id="tabv2plain-12">
<a onclick="myFunction22()" href="#collapseFour1">QESH Manual</a>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
<div class="col-md-8">
<span style="display:block; padding:10px;">
<div class="tabplaincontent">
<div class="tabv2plain-1" style="display:block;">
One Content
</div>
<div class="tabv2plain-2" style="display:none;">
Two Content
</div>
<div class="tabv2plain-3" style="display:none;">
Three Content
</div>
<div class="tabv2plain-4" style="display:none;">
Four Content
</div>
<div class="tabv2plain-5" style="display:none;">
Five Content
</div>
<div class="tabv2plain-6" style="display:none;">
Six Content
</div>
<div class="tabv2plain-7" style="display:none;">
Seven Content
</div>
<div class="tabv2plain-8" style="display:none;">
Eight Content
</div>
<div class="tabv2plain-9" style="display:none;">
Nine Content
</div>
<div class="tabv2plain-10" style="display:none;">
Ten Content
</div>
<div class="tabv2plain-11" style="display:none;">
Eleven Content
</div>
<div class="tabv2plain-12" style="display:none;">
Twelve Content
</div>
</div>
</span>
</div>
</div>
<div class="tab_icerik" style="display: none;">
<div class="col-md-4">
<span style="display:block;">
<div id="accordionB1" class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" style="color:#E51400; font-size:16px; font-weight:bold;">
<a data-toggle="collapse" data-parent="#accordionB1" onclick="myFunction23()" href="#collapseFive">FINANCE & ADMIN</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse in">
<div class="panel-body">
<div class="group row clear" id="tabsv3plain">
<div class="tabv3plain" id="tabv3plain-1">
<a onclick="myFunction24()" href="#collapseFive1">General</a>
</div>
</div>
</div>
</div>
</div>
</div>
</span>
</div>
<div class="col-md-8">
<span style="display:block; padding:10px;">
<div class="tabplaincontent">
<div class="tabv3plain-1" style="display:block;">
Thirteen Content
</div>
<div class="tabv3plain-2" style="display:none;">
Fourteen Content
</div>
<div class="tabv3plain-3" style="display:none;">
Fifteen Content
</div>
<div class="tabv3plain-4" style="display:none;">
Sixteen Content
</div>
</div>
</span>
</div>
</div>
</div>
</div>
For above requirement, I added window.location.hash to uniquely identify each Accordion tab in URL.
Now, when I click on any of the Accordion tab, I can see a unique name (based on selected tab) with hash at the end in URL
Example:
localhost:49963/Test.aspx#collapseThree1
Again, when I copy the URL (which include a unique name for each selected tab) always the 1st Accordion tab is opened i.e., CONSTRUCTION --> Quesh Manual --> Quesh Manual ; in place of last selected tab by user. Still the same issue persist.
Any help will be much appreciated

How can I make the horizontal bar hidden and make left and right buttons to scroll horizontally?

How can I make the horizontal bar hidden and make left and right buttons to scroll horizontally?
Also the scrolling should be enabled for mobiles (touch enabled).
I've created a jsfiddle of the markup I'm working on. Thanks a lot.
<div class="ui grid container r-feat-prod-row">
<div class="row">
<!--featured column starts-->
<div class="left floaded fourteen wide column">
<div class="ui container">
<div class="ui segment r-feat-col">
<h4 class="ui horizontal divider header">Featured Category</h4>
<!--featured products starts-->
<div class="scroll">
<div class="r-content">
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="rfeat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="rfeat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2143s1/watch.png">
</div>
</div>
<div class="rprod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="r-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/21s71/watch.png">
</div>
</div>
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="r-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="r-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta">
<span class="r-feat-header-price inverted">USD 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/2s4371/watch.png">
</div>
</div>
</div>
</div>
</div>
<!--featured products ends-->
</div>
</div>
<!-- right side 300x250 ad column starts-->
<div class="one wide column">
<div class="ui medium rectangle test ad r-ad-300" data-text="Advertising seems to be blocked by your browser.
It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">
</div>
</div>
<!-- right side 300x250 ad column ends-->
<!--featured column ends-->
</div>

Since not all browsers allow you to style the scroll bar, I have used overflow-y:hidden; on the parent to hide the scroll bar. You can style the buttons however you want. I just put them at the bottom.
Demo: http://jsfiddle.net/hopkins_matt/muL9mrL1/1/
CSS:
/* featured column */
.ui.segment.i-feat-col {
overflow-y:hidden;
}
.i-feat-prod-row {
margin-top: 30px !important;
}
h4.ui.horizontal.divider.header {
color: #6CAF2B;
}
.i-feat-col {
height: 250px !important;
}
.i-prod-card {
width: 170px;
height: 170px;
position: relative;
display: inline-block;
background: #ffffff;
box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
margin: 0.5rem 1em;
margin-top: auto;
padding: 1em 1em;
border-radius: 4px;
border: 1px solid rgba(34, 36, 38, 0.15);
top: 6px;
}
div.scroll {
height: calc(100% + 10px);
overflow-x: hidden;
overflow-y: hidden;
white-space: nowrap;
-webkit-overflow-scrolling-x: touch;
}
div.scroll:hover {
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
}
.i-content {
white-space: nowrap;
}
.i-feat-header {
text-transform: capitalize;
font-size: 12px;
white-space: initial !important;
text-align: left;
line-height: 17px;
letter-spacing: normal;
padding-right: 11px;
padding-left: 11px;
clear: right;
}
.i-feat-header-price {
color: #F44336;
font-weight: 500;
font-size: 15px;
}
.i-feat-img {
display: block;
max-width: 140px;
width: auto;
height: auto;
}
.dimmable {
position: absolute;
}
JS:
$(function () {
$('.i-prod-card .image').dimmer({
on: 'hover'
});
});
function scrollHoz(dir) {
if (dir == 'L') {
$('.scroll').animate({
scrollLeft: "-=" + 250 + "px"
});
} else if (dir == 'R') {
$('.scroll').animate({
scrollLeft: "+=" + 250 + "px"
});
}
}
HTML:
<div class="ui grid container i-feat-prod-row">
<div class="row">
<!--featured column starts-->
<div class="left floaded fourteen wide column">
<div class="ui container">
<div class="ui segment i-feat-col">
<h4 class="ui horizontal divider header">Featured Category</h4>
<!--featured products starts-->
<div class="scroll">
<div class="i-content">
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
<div class="i-prod-card">
<div class="blurring dimmable image ">
<div class="ui dimmer">
<div class="content">
<div class="i-feat-header">
<div class="ui inverted">Product long title second line Product long title Product...</div>
<div class="ui divider"></div>
<div class="meta"> <span class="i-feat-header-price inverted">MVR 100,000.00</span>
</div>
</div>
</div>
</div>
<img class="i-feat-img" src="https://s3.amazonaws.com/upload.uxpin/files/209268/214371/watch.png">
</div>
</div>
</div>
</div>
</div>
<!--featured products ends-->
</div>
</div>
<!-- right side 300x250 ad column starts-->
<div class="one wide column">
<div class="ui medium rectangle test ad i-ad-300" data-text="Advertising seems to be blocked by your browser.
It is fine, but please keep in mind that advertising helps us to host the website. If you find these ads intrusive or inappropriate, feel free to contact us.">
<iframe class="i-frame-ad" src="http://admanager.ibay.com.mv/show.php?z=57" width="300" height="250" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="0" scrolling="no"></iframe>
</div>
</div>
<!-- right side 300x250 ad column ends-->
<!--featured column ends-->
</div>
</div>
<button onclick="scrollHoz('L')">Left</button>
<button onclick="scrollHoz('R')">Right</button>

Bootstrap 3 Collapse on hover

I'm working on this site here. http://opennetsummit.wpengine.com/
The three images in the second section down trigger the bootstrap collapse function on click. I'd like them to show on hover, and hide when not hovering.
What do I need to change?
<script>
$(".paneltab1").hover(
function() {
$('#collapsePanel1').collapse('show');
}, function() {
$('#collapsePanel1').collapse('hide');
}
);
</script>
<div class="row panel-heading">
<div class="container">
<div class="col-xs-3">
<a class="paneltab1" data-toggle="collapse" href="#collapsePanel1" aria-expanded="false" aria-controls="collapsePanel1">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-rocket-icon.png">
<h3>Workshops</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel2" aria-expanded="false" aria-controls="collapsePanel2">
<div class="panel-tabs">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-circles-icon.png">
<h3>Open Networking Summit</h3>
</div>
</a>
</div>
<div class="col-xs-3 ">
<a class="" data-toggle="collapse" href="#collapsePanel3" aria-expanded="false" aria-controls="collapsePanel3">
<div class="panel-tabs">
<div>
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
<h3>Webinars</h3>
</div>
</div>
</a>
</div>
<div class="col-xs-3 ">
<div class="panel-tabs">
<div class="mid-form">
<h3>Get Updates</h3>
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel1">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Defy Protocol </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel2">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 2 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>
</div>
<div class="collapse" id="collapsePanel3">
<div class="row">
<div class="container">
<div class="col-xs-12 hompage-panel">
<div class="col-sm-4 center">
<img src="http://opennetsummit.wpengine.com/wp-content/uploads/2015/01/ons-inspire-icon.png">
</div>
<div class="col-sm-8">
<h2>Panel 3 </h2>
<h1>EMBRACE {OPEN} SOFTWARE</h1>
<h3>Open Networking Summit</h3>
<hr>
<p>June 15 - 18, 2015</p>
<p>Santa Clara Convention Center</p>
More Information
</div>
</div>
</div>
</div>

You can use jquery's hover along with bootstrap's collapse javascript, something like this:
$(".panel-tabs").hover(
function() {
$('#collapsePanel3').collapse('show');
}, function() {
$('#collapsePanel3').collapse('hide');
}
);
The first function(){} is for when the mouse enters, the second for when it leaves.
More info here:
http://api.jquery.com/hover/
http://getbootstrap.com/javascript/#collapse-methods

I changed the class from "collapse" to "collapse in" on mouseover and from "collapse in" to "collapse" on mouseout using GetElementbyID and it worked fine.
document.getElementById("panelid").className = "collapse in";

We Keep Coding

JavaScript is the programming language of the Web.

jQuery remove & add class on click - javascript

Related

JQuery $(document).on("click") on mobile

how to float divs when using search filter bootstrap

Bootstrap Accordion does not remain on the same tab, after copying the URL to other location

How can I make the horizontal bar hidden and make left and right buttons to scroll horizontally?

Bootstrap 3 Collapse on hover

Categories

Resources