hide & show div

C# Corner

hide & show div

CARD SECTION

class="col-sm-5 col-md-5 allcard expandableCollapsibleDiv" id="all-card">
class="scroll1">
class="column">
class="card-active" id="card">
class="row no-gutters">
class="col-md-4" style="background: #868e96;">
"..\bootstrap_navbar\assets\images\property-image\spire1.jpg"
class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">The Spires

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

class="card" id="card2">

class="row no-gutters">

class="col-md-4" style="background: #868e96;">

"..\bootstrap_navbar\assets\images\property-image\recosta.jpeg"

class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">ReCosta

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

class="card" id="card3">

class="row no-gutters">

class="col-md-4" style="background: #868e96;">

"..\bootstrap_navbar\assets\images\property-image\presidence.jpg"

class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">The Presidence

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

class="card" id="card4">

class="row no-gutters">

class="col-md-4" style="background: #868e96;">

"..\bootstrap_navbar\assets\images\property-image\spir2.jpg"

class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">The Spires

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col-12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

class="card" id="card5">

class="row no-gutters">

class="col-md-4" style="background: #868e96;">

"..\bootstrap_navbar\assets\images\property-image\recosta2.jpg"

class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">ReCosta

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

class="card" id="card6">

class="row no-gutters">

class="col-md-4" style="background: #868e96;">

"..\bootstrap_navbar\assets\images\property-image\presidence2.jpg"

class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">The Presidence

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

class="card-active" id="card1">

class="row no-gutters">

class="col-md-4" style="background: #868e96;">

"..\bootstrap_navbar\assets\images\property-image\spire1.jpg"

class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">The Spires

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

class="card" id="card8">

class="row no-gutters">

class="col-md-4" style="background: #868e96;">

"..\bootstrap_navbar\assets\images\property-image\recosta.jpeg"

class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">ReCosta

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

class="card" id="card9">

class="row no-gutters">

class="col-md-4" style="background: #868e96;">

"..\bootstrap_navbar\assets\images\property-image\presidence.jpg"

class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">The Presidence

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

class="card" id="card10">

class="row no-gutters">

class="col-md-4" style="background: #868e96;">

"..\bootstrap_navbar\assets\images\property-image\spir2.jpg"

class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">The Spires

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col-12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

class="card" id="card11">

class="row no-gutters">

class="col-md-4" style="background: #868e96;">

"..\bootstrap_navbar\assets\images\property-image\recosta2.jpg"

class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">ReCosta

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

class="card" id="card12">

class="row no-gutters">

class="col-md-4" style="background: #868e96;">

"..\bootstrap_navbar\assets\images\property-image\presidence2.jpg"

class="card-img-top h-100" alt="image1">

class="col-md-8">

class="card-body">

class="row abc">

class="col-md-8">

class="card-title">The Presidence

class="col-md-4 heart">

"..\bootstrap_navbar\assets\images\heart.png"

class="img img-responsive">

class="row r10" style=" margin-top: -7px;">

class="col-md-6">

class="card-text">Starting From

class="col-md-6 price">

₹4.52 L

class="row r11">

class="txt">

Min. 300 - Max. 600 Sq Ft

class="card1">

class="row r12">

class="col-md-4 col12">

class="loc">Baner

class="col-md-4 card-button">

"text" value="2BHK" class="btn2">

class="col-md-4 card-button">

"text" value="3BHK" class="btn2">

MAP

class="col-sm-7 col-md-7 map-card" id="spire-map">
class="row map-image mt-3">
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">

HERE IS SOME JQUERY CODE I HAVE CREATED

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

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Nisha Regil6y ago
Add one more class for with class="card" and class="card-active" and manage the showing and hiding of the 6/12 cards with jquery .class selector.
Farhan Ahmed6y ago
#card instead use class selector.card