用户单击产品包装盒时,切换功能不起作用

时间:2017-04-27 10:36:27

标签: jquery html css

$(document).ready(function(e) {
	$('.subBox').click(function(e) {
		$(this).addClass('active');
		if($(this).hasClass('active'))
		{
			$(this).find('.addtocart').addClass('active addedtocart').html('<i class="carticon"></i>Added to Cart');
		}
		else
		{
			//$(this).removeClass('active');
			$(this).find('.addtocart').removeClass('active addedtocart').html('<i class="carticon"></i>Add to Cart');
			//$(this).next('.addtocart').removeClass('active');
			//$(this).next('.addtocart').removeClass('addedtocart');
			//$(this).next('.addtocart').html('<i class="carticon"></i>Add to Cart');
		}
    });
	$('#entire-grp-btn').click(function(e) {
        $(this).toggleClass('');
    });
});
*{margin:0px; padding:0px;}
body{font-family:'Lato', Arial, sans-serif !important; font-size:14px !important;}
.PL0{padding-left:0px;}
.PR0{padding-right:0px;}
.FL{float:left;}
.FR{float:right;}
.CL{clear:both;}
.DN{display:none;}
.PT20{padding-top:20px;}
.PR0{padding-right:0px;}
.DIB{display:inline-block;}
.TAC{text-align:center;}
.MB10{margin-bottom:10px;}
.MT3{margin-top:3px;}
.MT7{margin-top:7px;}
.MT5{margin-top:5px;}
.MT10{margin-top:10px;}
.PLR20{padding:0px 20px;}
.PT10{padding-top:10px;}
.clearfix{display:block;}
.CTR{text-align: center;}
.disN{display:none;}
.FL{float:left;}
.FR{float:right;}
.PR,.highlight{ position: relative;}
.CL{clear:both;font-size: 0;line-height: 0;}
.clearfix:after{height: 0;clear: both;}
.clearfix{display: block;}
.DN{display:none;}
.DIB{display:inline-block;}
.DB{display:block;}
.TAC{text-align:center;}

.MT-8{margin-top: -8px;}
.MT3{margin-top: 3px;}
.MT5{margin-top: 5px;}
.MT7{margin-top: 7px;}
.MT12{margin-top: 12px;}
.MT10{margin-top: 10px;}
.MT15{margin-top:15px;}
.MT20{margin-top:20px;}
.ML15{margin-left: 15px;}
.MT15{margin-top: 15px;}
.ML10{margin-left: 10px;}
.ML20{margin-left: 20px;}
.MB10{margin-bottom:10px;}
.MB15{margin-bottom: 15px;}
.MR3{margin-right: 3px;}
.MR8{margin-right:8px;}
.MR10{margin-right: 10px;}
.MR20{margin-right:20px;}

.PA5{padding: 5px;}
.PA15{padding: 15px;}
.PA20{padding: 20px;}
.PT7{padding-top: 7px;}
.PT10{padding-top: 10px;}
.PT20{padding-top:20px;}
.PT30{padding-top: 30px;}
.PB15{padding-bottom: 15px;}
.PB10{padding-bottom:10px;}
.PB20{padding-bottom: 20px;}
.PB30{padding-bottom: 30px;}
.PR0{padding-right:0px;}
.PR5{padding-right: 5px;}
.PR10{padding-right:10px;}
.PR12{padding-right: 12px;}
.PR20{padding:0px 20px;}
.PL0{padding-left:0px;}
.PL5{padding-left: 5px;}
.PL10{padding-left:10px;}
.PL12{padding-left:12px;}	

@font-face{font-family: 'WebRupee'; src: url('fonts/WebRupee.V2.0.eot'); src: local('WebRupee'), url('fonts/WebRupee.V2.0.ttf') format('truetype'),  url('fonts/WebRupee.V2.0.woff') format('woff'), url('fonts/WebRupee.V2.0.svg') format('svg');font-weight: normal;font-style: normal;}
.rupee{font-family:'WebRupee';font-size:12px;font-style:normal;font-weight:500;}
.rupee20{font-family:'WebRupee';font-size:20px;font-style:normal;font-weight:600;}

.courseslink{list-style:none; display:block; padding:15px 0px; border-bottom:1px solid #ccc; text-align:center;}
.courseslink li{display:inline-block; padding:0px 40px;  border-right:1px solid #ccc;}
.courseslink li:last-child{border-right:0px;}
.courseslink li a{font:500 14px/16px 'Lato',Arial,sans-serif; color:#0081cd; text-decoration:none; padding:5px 10px;}
.courseslink li a:hover{background:#0081cd; border-radius:3px; color:#fff;}
.courseMainHdg{font:600 20px/26px 'Lato',Arial,sans-serif; color:#666; text-align:center; margin:0px; padding:10px 0px;}

#exTab .nav-pills{border-bottom:5px solid #02356a;}
#exTab .nav-pills> li{margin-left:0px !important;}
#exTab .nav-pills > li > a{border-radius: 0; cursor:pointer;}
#exTab .nav-pills> #exTab li>a, #exTab .nav-pills>li>a:focus, #exTab .nav-pills>li>a:hover{color: #fff; background: #02356a;}
#exTab .nav-pills> li.active>a, #exTab .nav-pills>li.active>a:focus, #exTab .nav-pills>li.active>a:hover{color: #fff; background: #02356a;}
#exTab .tab-content{color : #666; background:#FFF; border:1px solid #ccc; border-top:0px; padding:10px; margin-bottom:15px; display:block !important;}

.single-Box{background:#FFF; border:1px solid #ccc; padding:10px; margin-bottom:15px;}

.subcontainer{margin:0px; padding:0px; list-style:none; display:block;}
.subcontainer li{display:inline-block; padding:5px 12px 5px 0px; vertical-align:top;}
.subcontainer li .subBox{width:270px; background:#FFF; cursor:pointer;}
.subcontainer li .subBox .active{border:2px solid #0081cd; border-top:0px;}
.subcontainer li .subBox:hover{box-shadow:0px 0px 5px rgba(0,0,0,0.3);}
.subcontainer li .subBox:hover .subDetails{border:2px solid #0081cd; border-top:0px;}

.subcontainer li .subBox h3{background:#0081cd; color:#fff; font:600 20px/20px 'Lato',Arial,sans-serif; text-align:center; margin:0px; padding:15px 0px;}
.subDetails{display:block; border:2px solid #e5e5e5; border-top:0px;} /*8border:3px solid #0081cd; e4f5ff*/
.subDetails > ul{ list-style:none; margin:0px; padding:0px; display:block;}
.subDetails > ul li{display:block; padding:7px 15px; background:#F0f0f0; border-bottom:1px solid #d5d4d4;}
.subDetails .coursetime{background:#edecec; border-bottom:1px solid #d5d4d4; font:400 15px/20px 'Lato',Arial,sans-serif; color:#02356a; text-align:center; display:block; margin:0px !important; padding:14px 0px !important;}
.subDetails .coursetime strong{font-weight:900;}
.subDetails > ul li .rightIcon{display:inline-block;background:url(http://cdn.topperlearning.com/topper/img/checked_icon.png) no-repeat; width: 16px;height: 16px; padding-top:5px; position:relative; margin:2px 10px 0px 5px; text-align: center;float:left;}
.subPrice{font:900 28px/30px 'Lato',Arial,sans-serif; color:#02356a;text-align:center; display:block; padding:8px 0px 5px; display:block;}
/*single product Add to Cart Button*/

.carticon{background:url(images/cart_icon_2.png) no-repeat;display:inline-block; width:20px;height:20px; padding-top:5px; position:absolute; margin:0px 0px 0px -25px; text-align: center; outline:none; text-align:none;}
.addtocart:focus,.addtocart:active,.addtocart:hover{text-decoration:none; outline:none; box-shadow:none; border:0px !important;}
.addtocart{background:#f58000; border-radius:3px; width:243px; text-align:center; font:600 14px/18px 'Lato',Arial,sans-serif; color:#fff; padding:10px 0px; box-shadow:none; border:0px !important; margin:0 auto; text-transform:uppercase;padding-left:25px; position:relative;}
/*single product Add to Cart Button*/

/*single product Added to Cart Button*/
.addedtocart{background:#b16a01; border-radius:3px; width:243px; text-align:center; font:600 14px/18px 'Lato',Arial,sans-serif; color:#fff; padding:10px 0px; box-shadow:none; border:0px; margin:0 auto; text-transform:uppercase;padding-left:25px; position:relative;}

.dsc-offer{background:#edecec; padding:5px 0px; border-top:1px dashed #ccc;}
.dsc-offer .discount-txt{color:#00c032; text-align:center; font:600 22px/24px 'Lato',Arial, sans-serif; display:block;}
.dsc-offer > p{margin:0px; padding:0px 5px; color:#666; text-align:center; font:500 14px/18px 'Lato',Arial, sans-serif; } 

/*Entire Group Box*/
.entire-group .coursetime,.entire-group li{background:#e4f5ff !important;}
.entire-group .addtocart{background:#02356a !important;}

@media screen and (max-width: 767px) {
.courseslink li{padding:0px 5px;}
.courseslink li a{padding:5px;}
.subcontainer{display:flex;}
.tab-content{overflow-x:scroll;}
#exTab .tab-conten{overflow-x:scroll;}
/*.tab-content-store{ overflow-x:scroll;}*/
}
@media only screen and (device-width: 414px), (device-width: 412px) , (device-width: 375px) , (device-width: 360px) , (device-width: 320px){
.courseslink li{padding: 0px 0px;}
.courseslink li a{padding:5px 2px;}
}

@media only screen and (device-width: 320px){
.subcontainer li .subBox{width: 255px;}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<div class="container-fluid section5">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <h2 class="courseMainHdg" id="ca-cpt">CA CPT</h2>
            <div id="exTab">	
                <ul class="nav nav-pills">
                    <li class="active">
                        <a data-target="#cacptg1" data-toggle="tab">Group 1</a>
                    </li>
                    <li>
                        <a data-target="#cacptg2" data-toggle="tab">Group 2</a>
                    </li>
                </ul>
                <div class="tab-content clearfix">
                	<div class="tab-pane active" id="cacptg1">
                    	<ul class="subcontainer">
                        	<li>
                            	<div class="subBox">
                                	<h3>Accounting</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button class="addtocart"><i class="carticon"></i><span class="carttext">Add to Cart</span></button>
                                        </div>
                                        <div class="dsc-offer">
                                        	<span class="discount-txt">10% discount</span>
                                            <p>on purchesing <strong>Ethics & Communication</strong></p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Law</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Ethics & Communication</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Costing</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Financial Management</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Direct Tax</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Indirect Tax</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox entire-group">
                                	<h3>Entire Group I</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart" id="entire-grp-btn"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="cacptg2">
                    	<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

要求: 当用户点击产品包装盒时,“添加到购物车”按钮需要更改为“添加到购物车”,并且框将应用蓝色边框作为选定产品。 在取消选择时又反过来了。

结果: enter image description here

1 个答案:

答案 0 :(得分:0)

在检查元素是否具有此类之后,您总是直接添加active类。

首先检查,只是添加/删除

&#13;
&#13;
$(document).ready(function(e) {
	$('.subBox').click(function(e) {
  	var btn = $(this).find('.addtocart');
    
		if(!btn.hasClass('active'))
		{
			btn.addClass('active addedtocart').html('<i class="carticon"></i>Added to Cart');
		}
		else
		{
			btn.removeClass('active addedtocart').html('<i class="carticon"></i>Add to Cart');
		}
    });
	$('#entire-grp-btn').click(function(e) {
        $(this).toggleClass('');
    });
});
&#13;
*{margin:0px; padding:0px;}
body{font-family:'Lato', Arial, sans-serif !important; font-size:14px !important;}
.PL0{padding-left:0px;}
.PR0{padding-right:0px;}
.FL{float:left;}
.FR{float:right;}
.CL{clear:both;}
.DN{display:none;}
.PT20{padding-top:20px;}
.PR0{padding-right:0px;}
.DIB{display:inline-block;}
.TAC{text-align:center;}
.MB10{margin-bottom:10px;}
.MT3{margin-top:3px;}
.MT7{margin-top:7px;}
.MT5{margin-top:5px;}
.MT10{margin-top:10px;}
.PLR20{padding:0px 20px;}
.PT10{padding-top:10px;}
.clearfix{display:block;}
.CTR{text-align: center;}
.disN{display:none;}
.FL{float:left;}
.FR{float:right;}
.PR,.highlight{ position: relative;}
.CL{clear:both;font-size: 0;line-height: 0;}
.clearfix:after{height: 0;clear: both;}
.clearfix{display: block;}
.DN{display:none;}
.DIB{display:inline-block;}
.DB{display:block;}
.TAC{text-align:center;}

.MT-8{margin-top: -8px;}
.MT3{margin-top: 3px;}
.MT5{margin-top: 5px;}
.MT7{margin-top: 7px;}
.MT12{margin-top: 12px;}
.MT10{margin-top: 10px;}
.MT15{margin-top:15px;}
.MT20{margin-top:20px;}
.ML15{margin-left: 15px;}
.MT15{margin-top: 15px;}
.ML10{margin-left: 10px;}
.ML20{margin-left: 20px;}
.MB10{margin-bottom:10px;}
.MB15{margin-bottom: 15px;}
.MR3{margin-right: 3px;}
.MR8{margin-right:8px;}
.MR10{margin-right: 10px;}
.MR20{margin-right:20px;}

.PA5{padding: 5px;}
.PA15{padding: 15px;}
.PA20{padding: 20px;}
.PT7{padding-top: 7px;}
.PT10{padding-top: 10px;}
.PT20{padding-top:20px;}
.PT30{padding-top: 30px;}
.PB15{padding-bottom: 15px;}
.PB10{padding-bottom:10px;}
.PB20{padding-bottom: 20px;}
.PB30{padding-bottom: 30px;}
.PR0{padding-right:0px;}
.PR5{padding-right: 5px;}
.PR10{padding-right:10px;}
.PR12{padding-right: 12px;}
.PR20{padding:0px 20px;}
.PL0{padding-left:0px;}
.PL5{padding-left: 5px;}
.PL10{padding-left:10px;}
.PL12{padding-left:12px;}	

@font-face{font-family: 'WebRupee'; src: url('fonts/WebRupee.V2.0.eot'); src: local('WebRupee'), url('fonts/WebRupee.V2.0.ttf') format('truetype'),  url('fonts/WebRupee.V2.0.woff') format('woff'), url('fonts/WebRupee.V2.0.svg') format('svg');font-weight: normal;font-style: normal;}
.rupee{font-family:'WebRupee';font-size:12px;font-style:normal;font-weight:500;}
.rupee20{font-family:'WebRupee';font-size:20px;font-style:normal;font-weight:600;}

.courseslink{list-style:none; display:block; padding:15px 0px; border-bottom:1px solid #ccc; text-align:center;}
.courseslink li{display:inline-block; padding:0px 40px;  border-right:1px solid #ccc;}
.courseslink li:last-child{border-right:0px;}
.courseslink li a{font:500 14px/16px 'Lato',Arial,sans-serif; color:#0081cd; text-decoration:none; padding:5px 10px;}
.courseslink li a:hover{background:#0081cd; border-radius:3px; color:#fff;}
.courseMainHdg{font:600 20px/26px 'Lato',Arial,sans-serif; color:#666; text-align:center; margin:0px; padding:10px 0px;}

#exTab .nav-pills{border-bottom:5px solid #02356a;}
#exTab .nav-pills> li{margin-left:0px !important;}
#exTab .nav-pills > li > a{border-radius: 0; cursor:pointer;}
#exTab .nav-pills> #exTab li>a, #exTab .nav-pills>li>a:focus, #exTab .nav-pills>li>a:hover{color: #fff; background: #02356a;}
#exTab .nav-pills> li.active>a, #exTab .nav-pills>li.active>a:focus, #exTab .nav-pills>li.active>a:hover{color: #fff; background: #02356a;}
#exTab .tab-content{color : #666; background:#FFF; border:1px solid #ccc; border-top:0px; padding:10px; margin-bottom:15px; display:block !important;}

.single-Box{background:#FFF; border:1px solid #ccc; padding:10px; margin-bottom:15px;}

.subcontainer{margin:0px; padding:0px; list-style:none; display:block;}
.subcontainer li{display:inline-block; padding:5px 12px 5px 0px; vertical-align:top;}
.subcontainer li .subBox{width:270px; background:#FFF; cursor:pointer;}
.subcontainer li .subBox .active{border:2px solid #0081cd; border-top:0px;}
.subcontainer li .subBox:hover{box-shadow:0px 0px 5px rgba(0,0,0,0.3);}
.subcontainer li .subBox:hover .subDetails{border:2px solid #0081cd; border-top:0px;}

.subcontainer li .subBox h3{background:#0081cd; color:#fff; font:600 20px/20px 'Lato',Arial,sans-serif; text-align:center; margin:0px; padding:15px 0px;}
.subDetails{display:block; border:2px solid #e5e5e5; border-top:0px;} /*8border:3px solid #0081cd; e4f5ff*/
.subDetails > ul{ list-style:none; margin:0px; padding:0px; display:block;}
.subDetails > ul li{display:block; padding:7px 15px; background:#F0f0f0; border-bottom:1px solid #d5d4d4;}
.subDetails .coursetime{background:#edecec; border-bottom:1px solid #d5d4d4; font:400 15px/20px 'Lato',Arial,sans-serif; color:#02356a; text-align:center; display:block; margin:0px !important; padding:14px 0px !important;}
.subDetails .coursetime strong{font-weight:900;}
.subDetails > ul li .rightIcon{display:inline-block;background:url(http://cdn.topperlearning.com/topper/img/checked_icon.png) no-repeat; width: 16px;height: 16px; padding-top:5px; position:relative; margin:2px 10px 0px 5px; text-align: center;float:left;}
.subPrice{font:900 28px/30px 'Lato',Arial,sans-serif; color:#02356a;text-align:center; display:block; padding:8px 0px 5px; display:block;}
/*single product Add to Cart Button*/

.carticon{background:url(images/cart_icon_2.png) no-repeat;display:inline-block; width:20px;height:20px; padding-top:5px; position:absolute; margin:0px 0px 0px -25px; text-align: center; outline:none; text-align:none;}
.addtocart:focus,.addtocart:active,.addtocart:hover{text-decoration:none; outline:none; box-shadow:none; border:0px !important;}
.addtocart{background:#f58000; border-radius:3px; width:243px; text-align:center; font:600 14px/18px 'Lato',Arial,sans-serif; color:#fff; padding:10px 0px; box-shadow:none; border:0px !important; margin:0 auto; text-transform:uppercase;padding-left:25px; position:relative;}
/*single product Add to Cart Button*/

/*single product Added to Cart Button*/
.addedtocart{background:#b16a01; border-radius:3px; width:243px; text-align:center; font:600 14px/18px 'Lato',Arial,sans-serif; color:#fff; padding:10px 0px; box-shadow:none; border:0px; margin:0 auto; text-transform:uppercase;padding-left:25px; position:relative;}

.dsc-offer{background:#edecec; padding:5px 0px; border-top:1px dashed #ccc;}
.dsc-offer .discount-txt{color:#00c032; text-align:center; font:600 22px/24px 'Lato',Arial, sans-serif; display:block;}
.dsc-offer > p{margin:0px; padding:0px 5px; color:#666; text-align:center; font:500 14px/18px 'Lato',Arial, sans-serif; } 

/*Entire Group Box*/
.entire-group .coursetime,.entire-group li{background:#e4f5ff !important;}
.entire-group .addtocart{background:#02356a !important;}

@media screen and (max-width: 767px) {
.courseslink li{padding:0px 5px;}
.courseslink li a{padding:5px;}
.subcontainer{display:flex;}
.tab-content{overflow-x:scroll;}
#exTab .tab-conten{overflow-x:scroll;}
/*.tab-content-store{ overflow-x:scroll;}*/
}
@media only screen and (device-width: 414px), (device-width: 412px) , (device-width: 375px) , (device-width: 360px) , (device-width: 320px){
.courseslink li{padding: 0px 0px;}
.courseslink li a{padding:5px 2px;}
}

@media only screen and (device-width: 320px){
.subcontainer li .subBox{width: 255px;}
}
&#13;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<div class="container-fluid section5">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12">
            <h2 class="courseMainHdg" id="ca-cpt">CA CPT</h2>
            <div id="exTab">	
                <ul class="nav nav-pills">
                    <li class="active">
                        <a data-target="#cacptg1" data-toggle="tab">Group 1</a>
                    </li>
                    <li>
                        <a data-target="#cacptg2" data-toggle="tab">Group 2</a>
                    </li>
                </ul>
                <div class="tab-content clearfix">
                	<div class="tab-pane active" id="cacptg1">
                    	<ul class="subcontainer">
                        	<li>
                            	<div class="subBox">
                                	<h3>Accounting</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button class="addtocart"><i class="carticon"></i><span class="carttext">Add to Cart</span></button>
                                        </div>
                                        <div class="dsc-offer">
                                        	<span class="discount-txt">10% discount</span>
                                            <p>on purchesing <strong>Ethics & Communication</strong></p>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Law</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Ethics & Communication</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Costing</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Financial Management</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Direct Tax</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox">
                                	<h3>Indirect Tax</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                            	<div class="subBox entire-group">
                                	<h3>Entire Group I</h3>
                                    <div class="subDetails">
                                    	<h4 class="coursetime">Online Streaming Approx Hrs. <strong>134</strong></h4>
                                    	<ul>
                                            <li><i class="rightIcon"></i> Live Doubt Session</li>
                                            <li><i class="rightIcon"></i> Previous Year Question Papers</li>
                                            <li><i class="rightIcon"></i> Recorded Version</li>
                                            <li><i class="rightIcon"></i> Sample Papers</li>
                                            <li><i class="rightIcon"></i> Textbook Solutions</li>
                                        </ul>
                                        <div class="subPrice"><span class="rupee20">₹</span>8499</div>
                                        <div class="TAC MB10">
	                                        <button onClick="javascript:void(0);" class="addtocart" id="entire-grp-btn"><i class="carticon"></i>Add to Cart</button>
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="cacptg2">
                    	<h3>We use the class nav-pills instead of nav-tabs which automatically creates a background color for the tab</h3>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
&#13;
&#13;
&#13;