TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Nikita
NA
56
9.3k
hide & show div
May 10 2020 2:53 AM
i have a bootstrap toggle button for map using checkbox. when i want to click on that toggle switch then map div will be show. And when we turn it to off(or is UNCHECKED) then my scroll bar card section will be expand and map will be hidden. here i share you code.
MAP TOOGLE SWITCH CODE
<div id=
"maptoggle"
>
<div
class
=
"col-sm-4 mt-3 "
>
<text
class
=
"map"
>MAP VIEW</text> <span>
<div
class
=
"custom-control custom-switch"
>
<input type=
"checkbox"
class
=
"custom-control-input"
value=
"check"
id=
"customSwitches"
checked>
<label
class
=
"custom-control-label"
for
=
"customSwitches"
></label>
</div>
</span>
</div>
</div>
CARD SECTION
<div
class
=
"col-sm-5 col-md-5 allcard expandableCollapsibleDiv"
id=
"all-card"
>
<div
class
=
"scroll1"
>
<div
class
=
"column"
>
<!--Card 1-->
<div
class
=
"card-active"
id=
"card"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\spire1.jpg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>The Spires</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button>-->
</div>
<div
class
=
"col-md-4 card-button"
>
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card 2-->
<div
class
=
"card"
id=
"card2"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\recosta.jpeg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>ReCosta</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button> -->
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
> 3BHK</button> -->
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card 3-->
<div
class
=
"card"
id=
"card3"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\presidence.jpg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>The Presidence</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button> -->
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
> 3BHK</button> -->
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card 4-->
<div
class
=
"card"
id=
"card4"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\spir2.jpg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>The Spires</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col-12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button> -->
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
> 3BHK</button> -->
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card 5-->
<div
class
=
"card"
id=
"card5"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\recosta2.jpg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>ReCosta</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button> -->
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
> 3BHK</button> -->
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card 6-->
<div
class
=
"card"
id=
"card6"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\presidence2.jpg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>The Presidence</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button> -->
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
> 3BHK</button> -->
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card 7-->
<div
class
=
"card-active"
id=
"card1"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\spire1.jpg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>The Spires</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button>-->
</div>
<div
class
=
"col-md-4 card-button"
>
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card 8-->
<div
class
=
"card"
id=
"card8"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\recosta.jpeg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>ReCosta</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button> -->
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
> 3BHK</button> -->
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card 9-->
<div
class
=
"card"
id=
"card9"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\presidence.jpg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>The Presidence</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button> -->
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
> 3BHK</button> -->
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card 10-->
<div
class
=
"card"
id=
"card10"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\spir2.jpg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>The Spires</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col-12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button> -->
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
> 3BHK</button> -->
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card 11-->
<div
class
=
"card"
id=
"card11"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\recosta2.jpg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>ReCosta</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button> -->
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
> 3BHK</button> -->
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
<!--Card 12-->
<div
class
=
"card"
id=
"card12"
>
<div
class
=
"row no-gutters"
>
<div
class
=
"col-md-4"
style=
"background: #868e96;"
>
<img src=
"..\bootstrap_navbar\assets\images\property-image\presidence2.jpg"
class
=
"card-img-top h-100"
alt=
"image1"
>
</div>
<div
class
=
"col-md-8"
>
<div
class
=
"card-body"
>
<div
class
=
"row abc"
>
<div
class
=
"col-md-8"
>
<h5
class
=
"card-title"
>The Presidence</h5>
</div>
<div
class
=
"col-md-4 heart"
>
<img src=
"..\bootstrap_navbar\assets\images\heart.png"
class
=
"img img-responsive"
>
</div>
</div>
<div
class
=
"row r10"
style=
" margin-top: -7px;"
>
<div
class
=
"col-md-6"
>
<p
class
=
"card-text"
>Starting From</p>
</div>
<div
class
=
"col-md-6 price"
>
<span><b>₹4.52 L</b></span>
</div>
</div>
<div
class
=
"row r11"
>
<div
class
=
"txt"
>
Min. 300 - Max. 600 Sq Ft
</div>
</div>
<hr
class
=
"card1"
>
<div
class
=
"row r12"
>
<div
class
=
"col-md-4 col12"
>
<text
class
=
"loc"
>Baner</text>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
style=
"margin-left: 30px;"
>
2BHK</button> -->
<input type=
"text"
value=
"2BHK"
class
=
"btn2"
>
</div>
<div
class
=
"col-md-4 card-button"
>
<!-- <button type=
"button"
class
=
"btn2"
> 3BHK</button> -->
<input type=
"text"
value=
"3BHK"
class
=
"btn2"
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
MAP
<div
class
=
"col-sm-7 col-md-7 map-card"
id=
"spire-map"
>
<div
class
=
"row map-image mt-3"
>
<!-- <img src=
"..\bootstrap_navbar\assets\images\map-image.png"
alt=
"map-image"
class
=
"img img-responsive"
style=
"width: 100%;"
> -->
<iframe
src=
"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3782.2470145766283!2d73.79360031489337!3d18.56289918738437!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3bc2bf29c4263285%3A0x2d7a07fc0d5074bc!2sThe%20Spires!5e0!3m2!1sen!2sin!4v1588847570414!5m2!1sen!2sin"
width=
"600"
height=
"450"
frameborder=
"0"
style=
"border:0;"
allowfullscreen=
""
aria-hidden=
"false"
tabindex=
"0"
></iframe>
</div>
</div>
HERE IS SOME JQUERY CODE I HAVE CREATED
<script>
$(document).ready(
function
() {
$(
'#card'
).click(
function
() {
$(
'#maxcard-hide'
).show();
$(
'#spire-map'
).hide();
});
$(
'#cross'
).click(
function
() {
$(
'#maxcard-hide'
).hide();
$(
'#spire-map'
).show();
});
$(
function
() {
$(
'#customSwitches'
).change(
function
() {
if
($(
'#customSwitches'
).is(
':checked'
))
$(
"#spire-map"
).fadeOut();
else
$(
'#all-card'
).fadeIn();
});
});
});
</script>
PLEASE suggest me how will expand that all card section there are totatl 12 cards in scrollbr when we unchecked it the scrollbar section will be expand and result will be that 12 cards will be divided into two column 6 card in each column
Reply
Answers (
2
)
Add a update functionality in javascript
change the row color based on column data