I am using the html posted below
When I print (or print preview) the person div boxes align on page 1 correctly but on all subsequent pages the first person div box is off to the left side.
The person box is on page 2
It looks like if I remove the page-break-inside: avoid from the css this goes away but then the boxes are broken on the page breaks and I want to avoid that.
What am I doing wrong?
.person-box {
border: 1px solid #000000;
padding: 10px;
margin-bottom: 10px;
margin-left: 10px;
cursor: pointer;
page-break-inside: avoid;
}
.FieldName {
font-weight: bold;
padding: 5px;
/*border-bottom: 1px solid black;*/
}
.application-mugshot img {
height: 105px;
width: 105px;
}
span.application-name {
display: block;
font-weight: bold;
font-size: larger;
}
span.application-address,
span.application-phone,
span.application-email {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- META TAGS -->
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=0,width=device-width,height=device-height,initial-scale=1,maximum-scale=1" />
<!-- CSS FILES -->
<link href="Styles/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="Styles/font-awesome.min.css" rel="stylesheet" type="text/css">
<style>
</style>
</head>
<body>
<!-- HEADER -->
<header id="header-container">
</header>
<!-- MAIN CONTAINER -->
<section class="maincontainer">
<form name="frmMain" id="frmMain">
<div>
</div>
<div id="divMainWrapper" class="MainWrapper">
<div id="divMain" class="Main">
<div id="divContent" class="row">
<div class="row">
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
<div class="col-xs-1 "></div>
<div class="col-xs-5 person-box">
<input name="ctl394" type="text" value="YjYJD%2fbC9%2frhmCBxZqp8TA%3d%3d" class="application-id" style="display:none;" />
<div class="row">
<div class="col-xs-4 application-mugshot">
<img class="MugShot img-responsive animated rubberBand" src="..\Pictures\Applications\600\default.jpg" style="border-width:0px;left:-57;" />
</div>
<div class="col-xs-8">
<span class='application-name'>Smith, Joe</span><span class='application-address'>123 Main St </span><span class='application-address'> </span><span class='application-address'>New York, NY 13456 </span><span class='application-phone'>(555) 555-1212 </span>
<span
class='application-email'>joesmith#fakemail.com </span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<!-- FOOTER -->
</section>
<!-- JS FILES -->
<script type="text/javascript" src="JavaScripts/jQuery/jquery.js"></script>
<script type="text/javascript" src="JavaScripts/Bootstrap/bootstrap.js"></script>
<script type="text/javascript" src="JavaScripts/Common.js"></script>
<script type="text/javascript" src="JavaScripts/Forms/Application_Summary.js"></script>
</body>
</html>
Here is a zip file that can be downloaded and ran locally in print preview to reproduce the issue:
https://www.dropbox.com/s/t9n0cy06rdo1zt8/PrintProblem.zip?dl=0
the bootstrap grid model does not work the way you implemented it as you can see in the documentation (http://getbootstrap.com/css/#grid)
its always the structure:
<div class="row">
<div class="col-xs-6"></div>
<div class="col-xs-6"></div>
</div>
<div class="row">
<div class="col-xs-2"></div>
<div class="col-xs-8"></div>
<div class="col-xs-2"></div>
</div>
//and so on
you always need to reach "12" with your colums in each row. In my example it is 1) 6+6 = 12 and 2) 2+8+2=12. You column classes need to fill the 12. Hope it helps
Related
Need to find id from multiple div what found by .parentsUntil() method (for a future draw and send ajax)
This is possible to use .parentsUntil for this.
Have script like this
$(document).on('change', ':checkbox', (function(e) {
var prod = $(this).closest("#product");
var productUntilContainer = prod.parentsUntil('.container-fluid');
console.log(productUntilContainer);
/*
if ($(this).is(":checked")) {
prod.remove()
} else {
prod.remove()
}*/
}));
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div class="container-fluid" id="product-list-container">
<div id="progress" class="in-progress">In progress
<div id="18-11-20" class="datess">18-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/7.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №7 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #4 en : 3043
<br> пар #3 en : 9740
<br> пар #3 en : 8907
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1172.00</del></span>
</p>
<p class="product-price">$2211.00</p>
<p class="manufacturer">Manufacturer #1</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="112">
<label class="custom-control-label" for="112"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
<div id="19-11-20" class="datess">19-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/9.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №9 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #3 en : 2853
<br> пар #1 e : 6405
<br> пар #3 en : 2564
<br> пар #1 e : 8738
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1660.00</del></span>
</p>
<p class="product-price">$2653.00</p>
<p class="manufacturer">Manufacture #5</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="114">
<label class="custom-control-label" for="114"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
</div>
<div id="complete" class="complete">Complete
<div id="18-11-20" class="datess">18-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/9.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Product №9 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #3 en : 2853
<br> пар #1 e : 6405
<br> пар #3 en : 2564
<br> пар #1 e : 8738
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$1660.00</del></span>
</p>
<p class="product-price">$2653.00</p>
<p class="manufacturer">Manufacture #5</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="111" checked="">
<label class="custom-control-label" for="111"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
<div id="19-11-20" class="datess">19-11-20
<div id="Marja">
<h4>
<p class="badge badge-secondary">
Marja
</p>
</h4>
<div id="product" class="col-lg-3 no-gutter">
<div class="e-co-product no-gutter row">
<a class="product-image" align="center" href="">
<img class="img-fluid" src="
http://localhost/blog/public/product_img/no_img.jpg
" data-toggle="modal" data-target="#modalGallery" alt="">
</a>
<div class="product-info col no-gutter ">
<a href="" class=" align-self-center">
<h6 align="center">Pr223 №2 en</h6>
</a>
<div class="coninfo row justify-content-between no-gutter">
<div class="params">
пар #1 e : Beetle
<br>
</div>
<div class="price text-right">
<p class="product-price"><span class="ml-2"><del>$421.00</del></span>
</p>
<p class="product-price">$115.00</p>
<p class="manufacturer">Manufacturer #3</p>
</div>
<!--end price-->
</div>
<!--end coninfo-->
<div class="btn-shop row justify-content-between no-gutter">
<div class="shopsicons ">
<img src="http://localhost/blog/public/shops/3.png " alt="" class="shop-img">
</div>
<div class="custom-control form-control-lg custom-checkbox">
<input type="checkbox" class="custom-control-input" id="113" checked="">
<label class="custom-control-label" for="113"></label>
</div>
</div>
</div>
<!--end product-info-->
</div>
<!--e-co-product-->
<hr class="divider">
</div>
<!--product-->
</div>
<!--site div-->
</div>
</div>
</div>
It's not exactly easy to tell what it is you want to happen, or what problem you're having, but if you want to get a list of ids from your .productsUntil list, take this as an example:
$('button').on('click', function() {
console.log('hello world');
var prod = $(this).closest("#product");
var productUntilContainer = prod.parentsUntil('.container');
console.log(productUntilContainer.length);
const ids = [];
productUntilContainer.each(function() {
ids.push($(this).attr('id'));
});
console.log(ids);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="one">
<div id="two">
<div id="three">
<div id="product">
<button>click</button>
</div>
</div>
</div>
</div>
</div>
Can I switch the content via JavaScript or JQuery? I have content A and content B, where position A is next to envy and B is on the right, when I click the check box the content B will change to the left and content A to the right, and when I click again, it will change to like the beginning again.
This my snippet, I tried exchanging all div content between A and B. When I clicked on the check box, there will be all content in div A will exchange with div B. but why does only the input form change? while the content doesn't change, can anyone help me? is there something wrong with my code?
function swap_content(conta,contb)
{
var tmp = document.getElementById(conta).value;
document.getElementById(conta).value = document.getElementById(contb).value;
document.getElementById(contb).value = tmp;
var tdp = document.getElementById(text_id1).value;
document.getElementById(text_id1).value = document.getElementById(text_id2).value;
document.getElementById(text_id2).value = tdp;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>
If you simply want to invert the position of the two elements you can simply use flex reverse.
Obviously this will only be applicable if you don't want to maintain the background of the initial boxes.
This will be much faster to process than rebuilding the dom.
$(function() {
cbToggleFields();
});
$('#example1').off('change').on('change', function() {
cbToggleFields();
});
function cbToggleFields() {
if ($('#example1').is(':checked')) {
$('#rowA').addClass('reverse');
} else {
$('#rowA').removeClass('reverse');
}
}
#rowA{
display:flex;
flex-direction:row;
justify-content:left;
/*For vertical alignment*/
/*flex-direction:column;*/
}
#rowA.reverse{
flex-direction:row-reverse;
/*flex-direction:column-reverse;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper wrapper-content animated fadeInRight">
<div id="rowA" class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content A</span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" class="onoffswitch-checkbox" id="example1">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span><br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
I recommend using the .click jquery Event Listener to as I have done below. Then I used .html() to get the contents of the div and to swap the contents.
$('#example1').click(function() {
var conta = $('#conta').html();
var contb = $('#contb').html();
$('#conta').html(contb);
$('#contb').html(conta);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B">
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
</body>
Using pure javascript here, use value to get the value of the input and swap the content around.
You can even make the function work with different types by adding another paramter to the swap_content function. function swap_content(conta, contb, type = 'input'){} now it will work with divs and inputs.
function swap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputs
var contentType = type === 'input' ? 'value' : 'innerHTML';
var contenta = document.getElementById(conta)[contentType];
var contentb = document.getElementById(contb)[contentType];
document.getElementById(conta)[contentType] = contentb;
document.getElementById(contb)[contentType] = contenta;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/animate.css" rel="stylesheet">
<link href="http://webapplayers.com/inspinia_admin-v2.8/css/style.css" rel="stylesheet">
<body>
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-lg-5" id="conta" style="background: red;">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id1" id="text_id1" value="content A" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">
This is desc about Content A </span><br>
<img src="https://live.staticflickr.com/7254/7740405218_d3b9c5e839_h.jpg" width="100px" height="100px">
</div>
</div>
</div>
<div class="col-lg-2">
<div class="ibox ">
<div class="ibox-title">
<div class="switch">
<div class="onoffswitch">
<input type="checkbox" checked class="onoffswitch-checkbox" id="example1" onclick="swap_content('text_id1','text_id2')">
<label class="onoffswitch-label" for="example1">
<span class="onoffswitch-inner"></span>
<span class="onoffswitch-switch"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-5" id="contb" style="background: blue">
<div class="ibox ">
<div class="ibox-title">
<h5>
<input type="text" name="text_id2" id="text_id2" value="content B" >
</h5>
</div>
<div class="ibox-body">
<span style="color:white">This is desc about Content B</span> <br>
<img src="https://live.staticflickr.com/1429/5164748081_b2e7e19108_b.jpg" width="100px" height="100px">
</div>
</div>
</div>
</div>
</div>
<script src="http://webapplayers.com/inspinia_admin-v2.8/js/jquery-3.1.1.min.js"></script>
</body>
You can use the same function to swap different elements around.
function swap_content(conta, contb, type = 'input')
{
// check wether to use innerHTM or value for inputs
var contentType = type === 'input' ? 'value' : 'innerHTML';
var contenta = document.getElementById(conta)[contentType];
var contentb = document.getElementById(contb)[contentType];
document.getElementById(conta)[contentType] = contentb;
document.getElementById(contb)[contentType] = contenta;
}
function swap_items() {
swap_content('conta', 'contb', 'innerHTML'); // swap items using innerHTML
swap_content('inp1', 'inp2'); // swap items using value for input
}
<div id="conta"><p>I will be displayed on second place on dropdown's particular value</p></div>
<div id="contb"><p>I will be displayed on first place on dropdown's same value for which first div is placed at second position</p></div>
<input type="text" id="inp1" value="Will be placed second" />
<input type="text" id="inp2" value="Will be placed first" />
<button onclick="swap_items();">Swap content</button>
As you are using bootstrap, why not take advantage of the column ordering feature ?
This way it is only a matter of changing class names.
This assume you are using both on the same row (as in your example).
$('#conta').addClass('order-12').removeClass('order-1');
$('#contb').addClass('order-1').removeClass('order-12');
I have a few HTML elements that are the same, just different text.
On click of view less I hope to have a console print out of the number (array object in the list) I clicked show less on.
However I get
[HTMLCollection(1)]
printed twice no matter what show less html section I click on.
Is there a reason for this? and how to fix it.
Objective
I want to get the current element array number so I can scroll to the top of the dynamic array number so I can have many HTML elements and the click scroll top event would only scroll to the top of its own section.
HTML
<section id="sectorpage-strengths" class="sectorpage-strengths showLess" data-desktop="3" data-mobile="3" data-tablet="3">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2>
Commercial Services
</h2>
</div>
</div>
<div class="row sectorpage-strengths-list">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Datamonitor Healthcare </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Timely, In-Depth, Research And Expert Analysis Of The Biopharma Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Biomedtracker </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Real-Time Analysis Of Major Market-Moving Events In The Pharma And Biotech Industry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" data-display="true" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=254&la=en-US&hash=7625203318C5E0494B6DDA47479377F859CA7BA0" class="img-responsive sector-responisve-img" width="254" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Medtrack </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Track Companies From Discovery Through Patent Expiry, Loss Of Market Exclusivity And Generic Entry</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 marg1" style="display: block;">
<div class="sectorpage-strengths-list-item">
<div class="main-container" style="height: 0px;">
<img src="/~/media/informa-shop-window/pharma/roche-test-page-usman/bg-350x80.png?h=80&w=350&la=en-US&hash=67BE069F2E47FDDB97A49883D923435DEB8382B0" class="img-responsive sector-responisve-img" width="350" height="80" alt=" "> <div class="yellow-container" style="height: 80px;">
<h3>Strategic Transactions </h3>
</div>
</div>
<div class="wrap">
<div class="text-description" style="height: 145px;">
<span style="color: #565c6b; background-color: #ffffff;">Not All Deals Are The Same – Rely On The Pioneer In Deal-Making Intelligence</span><br style="color: #565c6b; background-color: #ffffff;">
<br style="color: #565c6b; background-color: #ffffff;">
<span style="color: #565c6b; background-color: #ffffff;">Login | Register</span>
</div>
<div class="slant"></div>
</div>
</div>
</div>
</div>
<div class="row view-all-sectors-btn-container">
<span class="center-block view-all-sectors-btn text-center more" role="button">
View more
<br>
<em class="informa-icon glyphicon glyphicon-plus-sign"></em>
</span>
<span class="center-block view-all-sectors-btn text-center less" role="button">
View Less
<br>
<em class="informa-icon glyphicon glyphicon-minus-sign"></em>
</span>
</div>
</div>
</section>
JavaScript
_bindShowLess = function () {
var _showLess = _sectorPageStrengths.find('.view-all-sectors-btn.less');
_showLess.on('click', function () {
var wrapper = $('#sectorpage-strengths');
var div = wrapper.find('.container');
var section = [];
for (var i = 0; i < div.length; i++) {
section[i] = div[i].getElementsByClassName('sectorpage-strengths-list');
}
console.log(section);
$('html, body').animate({
scrollTop: _sectorPageStrengths.offset().top
}, 700);
});
};
I am getting an error for the first ui-sref inside div with class="row episode-link" although the rest work correctly:
Syntax Error: Token '}' not a primary expression at column 12 of the expression [{seriesId: }] starting at [}].
The same ui-sref if put anywhere in the rest of the html structure works perfectly.
Unable to track the bug. Please Help.
<section>
<div class="container-fluid">
<div class="row episode-link">
<a ui-sref="app.episode({seriesId: {{show._id}}})">
<div class="col-md-12 guide">
<span class="fa fa-chevron-right" style="float: right;"></span>
<h5>Episode Guide</h5>
<p>{{episodes.length}} episodes</p>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="seriesjumbo jumbotron">
<div class="row">
<div class="col-md-4 show-img-div align-items-center">
<img class="show-img" src="{{show.poster}}" alt="{{show.seriesName}}">
</div>
<div class="col-md-8">
<h1>{{show.seriesName}}</h1>
<p class="episode-info"><i class="fa fa-calendar" aria-hidden="true"></i><span>{{show.firstAired | date: 'mm/dd/yyyy'}}</span></p>
<p class="info">{{show.network}} <span class="rating"><i class="fa fa-star fa-lg star" aria-hidden="true"></i> {{show.rating}}</span></p>
<p class="info"><em>{{show.airsDayOfWeek}}s, {{show.airsTime}} GMT </em></p>
<div class="cap">
<span class="label label-default" ng-repeat="genre in show.genre">{{genre}}</span>
</div>
<div class="menus"><span class="fa fa-list"></span></div>
<div class="menus"><span class="fa fa-heart"></span></div>
<div class="bookmark"><span class="fa fa-bookmark"></span></div>
<div class="menus"><span class="fa fa-star"></span></div>
<div>
<h3>Overview </h3>
<p>{{show.overview}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<uib-tabset active="active">
<uib-tab index="0" heading="Episodes">
<div class="row">
<div class="col-md-6">
<h5>Seasons</h5>
<ul class="season-list">
<li ng-repeat="season in seasons | orderBy: '-valueOf()'"><a ui-sref="app.episode({seriesId: {{show._id}}, season: {{season}}})">{{season}}</a></li>
</ul>
</div>
<div class="col-md-6">
<h5>Years</h5>
<ul class="season-list">
<li ng-repeat="year in firstAired | orderBy:'-toString()'"><a ui-sref="app.episode({seriesId: {{show._id}}, year: {{year}}})">{{year}}</a></li>
</ul>
</div>
</div>
</uib-tab>
<uib-tab index="1" heading="Fan Arts">
<div ui-view="fan_arts"></div>
</uib-tab>
</div>
</div>
</div>
</section>
I have design a flight search listing page in HTML.
Now want to show/hide (slidUp/slideDown) the next div on button click.
Here my html markup:
http://qubedns.co.in/codes/design/rnp/flight-listing-1.html
HTML CODE:
<td class="flight-list">
<!-- FLIGHT 1 --->
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airsprite airlogo A10">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- FLIGHT 1 END -->
<!-- FLIGHT 2 -->
<div class="flights">
<div class="flight-box">
<div class="row">
<div class="col-sm-3">
<div class="flight-info">
<div class="left-i">
<img src="img/sp_trans.gif" class="airsprite airlogo A10">
<div class="flight-no">SG-264</div>
</div>
<div class="right-i">
<div class="name">Air India</div>
</div>
</div>
</div>
<div class="col-sm-5">
<div class="flight-duration">
<div class="row">
<div class="col-sm-4">
<div class="events">
<span class="text">Depart</span>
<span class="time">12:30 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Arrive</span>
<span class="time">03:10 PM</span>
<span class="route">IXA <i class="fa fa-arrow-right"></i> CCU</span>
</div>
</div>
<div class="col-sm-4">
<div class="events">
<span class="text">Duration</span>
<span class="time">1h 40m </span>
<span class="route">No Stop</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="fare-price">
<div class="row">
<div class="col-sm-6">
<span class="f-price">3999</span>
</div>
<div class="col-sm-6">
<div class="book-action">
<div class="btn-group-vertical" role="group">
<button type="button" class="btn btn-danger btn-book" name="booknow">Book Now</button>
<button type="button" class="btn text-primary btn-more" name="details">View More...</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flight-footer">
<div class="row">
<div class="col-sm-3">
<div class="refund-status">
<span>Refundable</span>
</div>
</div>
<div class="col-sm-3">
<div class="fare-role">
Fare rules
</div>
</div>
<div class="col-sm-3">
<div class="baggage-info">
Baggage Information
</div>
</div>
<div class="col-sm-3">
<div class="itinerary-info">
Flight itinerary
</div>
</div>
</div>
</div>
<div class="flight-itinerarySummary">
<div class="row">
<div class="col-sm-12">
<h2>Agartala → Bangalore <small>22 Nov 2015</small></h2>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
<div class="connector weak">
<small class="layOver">Layover : 5h 20m</small>
</div>
<ul class="itinerarySummary">
<li class="vendor">
<div class="airLogo fLeft">
<img src="img/airlines/AI.png" height="23" width="27">
</div>
<div class="airlineName">
<span class="name">Air India</span>
<small class="flightNumber">AI-744</small>
<small class="travelClass">Economy</small>
<small class="truncate" title=""></small>
</div>
</li>
<li class="start">
<time>
<span class="placeTime">
<span rel="tTooltip" original-title="Singerbhil, Agartala">IXA</span>
<strong> 11:20 </strong>
</span>
<span class="travelDate">22 Nov 2015</span>
</time>
<small class="terminal">
Singerbhil, Agartala
</small>
</li>
<li class="details">
<i class="clk itineraryClock"></i>
<abbr class="duration weak">50m</abbr>
</li>
<li class="end">
<time>
<span class="placeTime">
<strong> 12:10 </strong>
<span rel="tTooltip" original-title="Netaji Subhas Chandra Bose Airport, Kolkata">CCU</span>
</span>
<span class="travelDate"> 22 Nov 2015 </span>
</time>
<small class="terminal">
Netaji Subhas Chandra Bose Airport, Kolkata, Terminal 2
</small>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- FLIGHT 2 END -->
</td>
I want to slideUp & SlideDown (Toggle) 'flight-itinerarySummary' div on 'btn-more' on click. Also, if any one 'flight-itinerarySummary' is slideDown, all others rows 'flight-itinerarySummary' will slideUp(hide).
I have include Jquery v2.1.1 at html section.
Plz help me anyone to build this on jquery.
Try this:
$(this).next() gets the next element.
$('.btn text-primary btn-more').click(function () {
$('div.flightitinerarySummary').slideUp();
$(this).next('div.flight-itinerarySummary').slideToggle();
return false;
});
You can check whether element is visible or not and then slide down or slide up the div as following.
$(document).ready(function(e) {
$(".btn-more").click(function(){
$('.flight-itinerarySummary').slideUp();
if($(this).closest('.flight-box').siblings('.flight-itinerarySummary').is(":visible")){
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideUp();
}else{
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideDown();
}
});
});
If you want, you can hide all divs with class flight-itinerarySummary at start by adding following style.
<style>
.flight-itinerarySummary{
display:none;
}
</style>
JSFiddle
You can do this like following
$('.btn-more').click(function() {
$(this).closest('.flight-box')
.siblings('.flight-itinerarySummary')
.slideToggle();
})
UPDATE:
$('.btn-more').click(function() {
var nextItiner = $(this).closest('.flight-box').siblings('.flight-itinerarySummary');
if(nextItiner.is(':visible')){
nextItiner.slideUp();
}
else {
nextItiner.slideDown();
}
$('.flight-itinerarySummary').not(nextItiner[0]).each(function(){
$(this).hide();
});
})