"show hide text"
Bootstrap 4.1.1 Snippet by prabuanan

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="main-content"> <div class="all_deals"> <div class="head_menu"> <div class="container"> <div class="row"> <div class="col-md-3 all_cat_blk"> <ul> <li><span class="navbar-toggler-icon"><i class="fa fa-bars"></i></span></li> <li><a href="#">Shop By Department</a></li> </ul> </div> <nav class="navbar navbar-expand-lg"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"><i class="fa fa-bars"></i></span> </button> <div class="collapse navbar-collapse ml-5" id="navbarTogglerDemo03"> <ul class="navbar-nav mr-auto mt-2 mt-lg-0 hover_eff"> <li class="nav-item hover_active"> <a class="nav-link" href="#">Categories </a> </li> <li class="nav-item"> <a class="nav-link" href="#">Top Stores</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Refer & Earn</a> </li> <li class="nav-item"> <a class="nav-link" href="#"> Support </a> </li> </ul> </div> <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> <ul class="navbar-nav mt-2 mt-lg-0 ml-5"> <li class="nav-item active"> <a class="nav-link" href="#"><img src="images/gift.png" class="img-fluid mr-3">Available Balance : $ 6000.00 </a> </li> <li class="nav-item ml-4"> <a class="nav-link" href="#"><img src="images/rewar.png" class="img-fluid mr-3">Rewards : 0.00</a> </li> </ul> </div> </nav> </div> </div> </div> </div> <div class="container mt-4"> <div class="container mb-4"> <div class="whole_contant mt-5"> <div class="row"> <div class="col-md-2"> <img src="images/coupons_amz.png" class="img_amz_shadow" /> </div> <div class="col-md-10"> <span class="mr-4 d-flex mt-4"> <img src="images/head.png"> <div class="text-uppercase ml-3 coupons_title"> <h5> NNNOW Offers: Flat 50% Off on Everything + Rs 350 CashKaro Cashback on orders over rs 750</h5> </div> </span> <p class="text-uppercase ml-4 text_gradient mt-2 mb-2">WHAT IS CASHaat CASHBACK?</p> <button class="btn ml-4 btn-brand" type="submit">SEE COUPONS WITH CASHBACK</button> </div> </div> </div> </div> <!-- cards start --> <div class="container"> <div class="row"> <!-- start one card --> <div class="col-sm-12 mt-4"> <div class="card rounded-0 coupons_card"> <div class="card-body"> <div id="accordion" class="accordion"> <div class="col-md-12"> <div class="card-header collapsed p-0" data-toggle="collapse" href="#collapseOne" data-parent="#accordion"> <a class="card-title"> <span class="mr-4 d-flex mt-4"> <img src="images/head.png"> <div class="text-uppercase ml-3 coupons_card_title d-flex"> <h5> NNNOW Offers: Flat 50% Off on Everything + Rs 350 CashKaro Cashback on orders over rs 750 <span class="float-right"> </span> </h5> </div> </span> </a> </div> <p class="text-uppercase ml-4 coupon_text mt-2 mb-2">HOW TO AVAIL THIS AMAZON DEAL</p> <div id="collapseOne" class="card-body collapse p-0" data-parent="#accordion"> <div class="coupons_box_title"> <p class="ml-4 mt-2 mb-2">click Activate Rewards buttons below</p> <p class="ml-4 mt-2 mb-2">Click Visit Retailer Button You will be redirected to Amazon webeite </p> <p class="ml-4 mt-2 mb-2">Shop normally as you do </p> <p class="ml-4 mt-2 mb-2">Earn CashKero Rewards on all Top Categories such as Fashion. Grocery, Health &</p> <p class="ml-4 mt-2 mb-2"> Personal Carer Horne & Kitchen and more </p> <p class="ml-4 mt-2 mb-2"> Your cashlffiro Rewards will be tracked 0 days shipment on your order. </p> </div> </div> <div class="input-group ml-2 mt-4 mb-2 col-sm-5"> <span class="input-group-btn"> <button class="btn btn-theme btn-brand text-uppercase" type="submit">Activate reward</button> </span> <span class="ml-4 mt-2">Expires 11 days</span> </div> </div> </div> </div> </div> </div> <!-- end one card --> <!-- start two card --> <div class="col-sm-12 mt-4"> <div class="card rounded-0 coupons_card"> <div class="card-body"> <div id="accordion" class="accordion"> <div class="col-md-12"> <div class="card-header collapsed p-0" data-toggle="collapse" href="#collapseTwo" data-parent="#accordion"> <a class="card-title"> <span class="mr-4 d-flex mt-4"> <img src="images/head.png"> <div class="text-uppercase ml-3 coupons_card_title d-flex"> <h5> AMAZON OFFER TODAY: UPTO 95% OFF ON FASHION, APPLIANCES & MORE + UPTO 5% REWARDS <span class="float-right"> </span> </h5> </div> </span> </a> </div> <p class="text-uppercase ml-4 coupon_text mt-2 mb-2">HOW TO AVAIL THIS AMAZON DEAL <span class="coupon_activate"> click Activate Rewards buttons below</span> </p> <div id="collapseTwo" class="card-body collapse p-0" data-parent="#accordion"> <div class="coupons_box_title"> <p class="ml-4 mt-2 mb-2">Click Visit Retailer Button You will be redirected to Amazon webeite </p> <p class="ml-4 mt-2 mb-2">Shop normally as you do </p> <p class="ml-4 mt-2 mb-2">Earn CashKero Rewards on all Top Categories such as Fashion. Grocery, Health &</p> <p class="ml-4 mt-2 mb-2"> Personal Carer Horne & Kitchen and more </p> <p class="ml-4 mt-2 mb-2"> Your cashlffiro Rewards will be tracked 0 days shipment on your order. </p> </div> </div> <div class="input-group ml-2 mt-4 mb-2 col-sm-5"> <span class="input-group-btn"> <button class="btn btn-theme btn-brand text-uppercase" type="submit">Activate reward</button> </span> <span class="ml-4 mt-2">Expires 11 days</span> </div> </div> </div> </div> </div> </div> <!-- end two card --> <!-- start three card --> <div class="col-sm-12 mt-4"> <div class="card rounded-0 coupons_card"> <div class="card-body"> <div id="accordion" class="accordion"> <div class="col-md-12"> <div class="card-header collapsed p-0" data-toggle="collapse" href="#collapseThree" data-parent="#accordion"> <a class="card-title"> <span class="mr-4 d-flex mt-4"> <img src="images/head.png"> <div class="text-uppercase ml-3 coupons_card_title d-flex"> <h5> AMAZON OFFER TODAY: UPTO 95% OFF ON FASHION, APPLIANCES & MORE + UPTO 5% REWARDS <span class="float-right"> </span> </h5> </div> </span> </a> </div> <p class="text-uppercase ml-4 coupon_text mt-2 mb-2">HOW TO AVAIL THIS AMAZON DEAL <span class="coupon_activate"> click Activate Rewards buttons below</span> </p> <div id="collapseThree" class="card-body collapse p-0" data-parent="#accordion"> <div class="coupons_box_title"> <p class="ml-4 mt-2 mb-2">Click Visit Retailer Button You will be redirected to Amazon webeite </p> <p class="ml-4 mt-2 mb-2">Shop normally as you do </p> <p class="ml-4 mt-2 mb-2">Earn CashKero Rewards on all Top Categories such as Fashion. Grocery, Health &</p> <p class="ml-4 mt-2 mb-2"> Personal Carer Horne & Kitchen and more </p> <p class="ml-4 mt-2 mb-2"> Your cashlffiro Rewards will be tracked 0 days shipment on your order. </p> </div> </div> <div class="input-group ml-2 mt-4 mb-2 col-sm-5"> <span class="input-group-btn"> <button class="btn btn-theme btn-brand text-uppercase" type="submit">Activate reward</button> </span> <span class="ml-4 mt-2">Expires 11 days</span> </div> </div> </div> </div> </div> </div> <!-- end three card --> <!-- start four card --> <div class="col-sm-12 mt-4"> <div class="card rounded-0 coupons_card"> <div class="card-body"> <div id="accordion" class="accordion"> <div class="col-md-12"> <div class="card-header collapsed p-0" data-toggle="collapse" href="#collapsefour" data-parent="#accordion"> <a class="card-title"> <span class="mr-4 d-flex mt-4"> <img src="images/head.png"> <div class="text-uppercase ml-3 coupons_card_title d-flex"> <h5> AMAZON OFFER TODAY: UPTO 95% OFF ON FASHION, APPLIANCES & MORE + UPTO 5% REWARDS <span class="float-right"> </span> </h5> </div> </span> </a> </div> <p class="text-uppercase ml-4 coupon_text mt-2 mb-2">HOW TO AVAIL THIS AMAZON DEAL <span class="coupon_activate"> click Activate Rewards buttons below</span> </p> <div id="collapsefour" class="card-body collapse p-0" data-parent="#accordion"> <div class="coupons_box_title"> <p class="ml-4 mt-2 mb-2">Click Visit Retailer Button You will be redirected to Amazon webeite </p> <p class="ml-4 mt-2 mb-2">Shop normally as you do </p> <p class="ml-4 mt-2 mb-2">Earn CashKero Rewards on all Top Categories such as Fashion. Grocery, Health &</p> <p class="ml-4 mt-2 mb-2"> Personal Carer Horne & Kitchen and more </p> <p class="ml-4 mt-2 mb-2"> Your cashlffiro Rewards will be tracked 0 days shipment on your order. </p> </div> </div> <div class="input-group ml-2 mt-4 mb-2 col-sm-5"> <span class="input-group-btn"> <button class="btn btn-theme btn-brand text-uppercase" type="submit">Activate reward</button> </span> <span class="ml-4 mt-2">Expires 11 days</span> </div> </div> </div> </div> </div> </div> <!-- end four card --> <!-- start five card --> <div class="col-sm-12 mt-4"> <div class="card rounded-0 coupons_card"> <div class="card-body"> <div id="accordion" class="accordion"> <div class="col-md-12"> <div class="card-header collapsed p-0" data-toggle="collapse" href="#collapsefive" data-parent="#accordion"> <a class="card-title"> <span class="mr-4 d-flex mt-4"> <img src="images/head.png"> <div class="text-uppercase ml-3 coupons_card_title d-flex"> <h5>AMAZON OFFER TODAY: UPTO 95% OFF ON FASHION, APPLIANCES & MORE + UPTO 5% REWARDS <span class="float-right"> </span> </h5> </div> </span> </a> </div> <p class="text-uppercase ml-4 coupon_text mt-2 mb-2">HOW TO AVAIL THIS AMAZON DEAL <span class="coupon_activate"> click Activate Rewards buttons below</span> </p> <div id="collapsefive" class="card-body collapse p-0" data-parent="#accordion"> <div class="coupons_box_title"> <p class="ml-4 mt-2 mb-2">Click Visit Retailer Button You will be redirected to Amazon webeite </p> <p class="ml-4 mt-2 mb-2">Shop normally as you do </p> <p class="ml-4 mt-2 mb-2">Earn CashKero Rewards on all Top Categories such as Fashion. Grocery, Health &</p> <p class="ml-4 mt-2 mb-2"> Personal Carer Horne & Kitchen and more </p> <p class="ml-4 mt-2 mb-2"> Your cashlffiro Rewards will be tracked 0 days shipment on your order. </p> </div> </div> <div class="input-group ml-2 mt-4 mb-2 col-sm-5"> <span class="input-group-btn"> <button class="btn btn-theme btn-brand text-uppercase" type="submit">Activate reward</button> </span> <span class="ml-4 mt-2">Expires 11 days</span> </div> </div> </div> </div> </div> </div> <!-- end five card --> <div class="col-sm-12 mt-4 mx-auto d-block text-center"> <button class="btn btn-theme btn-brand text-uppercase" type="submit">Load More</button> </div> </div> </div> <!-- cards end --> </div> </div>
/* coupons start desktop */ .coupons_card_title { cursor: pointer; } .coupons_card_title h5 { line-height: 28px; font-size: 28px; } .coupons_title { line-height: 28px; font-size: 26px; } .coupons_card_title h5 span { font-size: 12px; color: #fd2f33; } .coupons_title h5 { line-height: 28px; font-size: 26px; } .btn-brand { background: linear-gradient(to bottom, #ff6000 0%, #fc0a59 100%); color: #fff; border-radius: 0px; padding: 8px 44px; font-size: 14px; } .coupon_text { color: #fd2f33; font-size: 16px; } .coupons_box_title p { font-size: 14px; } .coupons_card { border: 28px solid #f2f2f2; } .coupons_card .card-header:after { font-family: 'FontAwesome'; content: "\f106"; float: right; position: relative; top: -52px; color: #000; font-weight: bold; } .coupons_card .card-header.collapsed:after { content: "\f107"; } .coupons_card .card-header.collapsed .coupons_card_title h5 span:after{ content: "show Details"; /* display: block; */ position: relative; } .coupons_card .card-header[aria-expanded="true"] .coupons_card_title h5 span:before { content: "hide Details"; /* display:none; */ } .coupons_card .card-header { background-color: transparent; border-bottom: 0px solid rgba(0,0,0,.125); } .coupon_activate { color: #000; font-size: 14px; text-transform: lowercase; padding-left: 12px; } /* coupons end desktop */

Questions / Comments: