How can i disable left control when first item is active and same goes to right if last item is active then disable right control
i would appreciate if i get any suggestions, is there any alternative for this
Thanks
JsFiddle Here
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner text-center">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
</li>
</ol>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>
You can do it using slid.bs.carousel bootstrap event
1. Show or Hide controls
jQuery("#quote-carousel").on('slid.bs.carousel', function () {
//Show or Hide left indicator
if($(this).find('li:first-child').hasClass('active')){
$(this).find('.left').hide();
}else{
$(this).find('.left').show();
}
//Show or Hide right indicator
if($(this).find('li:last').hasClass('active')){
$(this).find('.right').hide();
}else{
$(this).find('.right').show();
}
}).trigger('slid.bs.carousel');
2. For Disabling the controls
You can disable it using CSS pointer-events.
See here for complete code, https://jsfiddle.net/n4v63g3L/6/
Related
<!----- home banner ---->
<div class="home-slider">
<ngx-slick class="carousel" [config]="slideConfig">
<div ngxSlickItem *ngFor="let slide of slides" class="slide">
<div class="banner">
<img class="img-responsive" src="{{ slide.img }}" alt="" width="100%">
</div>
</div>
</ngx-slick>
</div>
<!----==== 3 content ----==================--->
<div class="dis_content">
<div class="container">
<div class="col-md-4 text-center">
<i class="fa fa-google-wallet " aria-hidden="true"></i>
<h4>Discount System</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-codepen " aria-hidden="true"></i>
<h4>Free Delivery</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus. </p>
</div>
<div class="col-md-4 text-center">
<i class="fa fa-circle-o-notch " aria-hidden="true"></i>
<h4>Support 24/7</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id feugiat tellus.</p>
</div>
</div>
</div>
<!---====== 4 images =============------------>
<div class="ldy-page">
<div class="container-fluid">
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
<div class="col-md-3">
<div class="ldy1">
</div>
</div>
</div>
</div>
<owl-carousel [options]="{items: 3, dots: false, navigation: false}" <!-- If images array is dynamically changing pass this array to [items] input -->
[items]="images"
<!-- classes to be attached along with owl-carousel class -->
[carouselClasses]="['owl-theme', 'row', 'sliding']">
<div class="item" *ngFor="let sliding of slidings;let i = index">
<div class="thumbnail-image" [ngStyle]="{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}"></div>
</div>
</owl-carousel>
How to set the image and background image path in my page? I set the image on home.components.ts file. How to set the background image and image path in Angular 6?
[{'background': 'url('abc.jpg')no-repeat scroll center center / 80px 80px'}] in ng:///AppModule/HomeComponent.html#73:38 (" class="item" *ngFor="let sliding of slidings;let i = index">
use it to wantet selector
[style.backgroundImage]="'url('+ imagSource +')'"
in css:
.item{
background-position: center;
background-repeat: no-repeat;
.
.
.
}
Below answer worked for angular 6.
In app.component.css
.image{
height:40em;
background-size:cover;
width:auto;
background-image:url('copied image address');
background-position:50% 50%;
}
Also in app.component.html simply add as below
<div class="image">
Your content
</div>
This way I was able to set background image in Angular 6.
Hi i use bootstrap slider to slide element now i want when slider are slide than add a class in another section element. so try to do when .carousel-indicators li:nth-child(1) has class active than add class active also on .single-recent.first and than when .carousel-indicators li:nth-child(2) has class active than add class active on .single-recent.second and remove class active from .single-recent.first and any other all .single-recent element i have. and repeat it dynamically again and again.... but i didn't success to do that.
Here is the HTML code what i use:
<div id="launchgame-jumbotron-carousel" class="carousel slide carousel-fade work-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="0" class="active"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="1"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="2"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
</div>
<a class="left jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="prev"><i class="fa fa-angle-left"></i></a>
<a class="right jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="next"><i class="fa fa-angle-right"></i></a>
</div>
<section id="recent-featured" class="recent-featured-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="recent-featured-wrap">
<h3>Featured Work</h3>
<div class="single-recent first">
<div class="single-inner-img">
<img src="img/work/featured/featured-01.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent second">
<div class="single-inner-img">
<img src="img/work/featured/featured-02.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent third">
<div class="single-inner-img">
<img src="img/work/featured/featured-03.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent fourth">
<div class="single-inner-img">
<img src="img/work/featured/featured-04.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And the jQuery :
jQuery(document).ready(function(){
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(1)").hasClass('active')) {
$(".single-recent.first").addClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.third").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(2)").hasClass('active') {
$(".single-recent.second").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.third").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(3)").hasClass('active')) {
$(".single-recent.third").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(4)").hasClass('active')) {
$(".single-recent.fourth").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.third").removeClass('active');
} });
Please help me to find out a way...
I'm using the Cycle JS 2 jQuery plugin but it doesn't seem to be sliding correctly when clicking the "Prev" or "Next" buttons.
Update: I am trying to get it to slide all 4 sections at once, hence that is why 4 sections using col-sm-3 are contained within each .item block.
CodePen: http://codepen.io/gutterboy/pen/MaZyZx
HTML:
<div id="main-slider" class="slider">
<div class="item row">
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://runnersfeed.com/wp-content/uploads/2011/12/curry.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.newsmax.com/Newsmax/files/44/44b1645b-3804-408d-9c64-f68c8f45bc74.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.interbasket.net/news/wp-content/uploads/Lebron-James-Miami-Heat.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
</div>
<!-- Item Ends -->
<div class="item row">
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://i.usatoday.net/sports/_photos/2011/07/11/NBA-lockout-allows-players-to-look-overseas-9V7G6NL-x-large.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://static6.businessinsider.com/image/5241a14b6bb3f7c368ab8319/nba-players-might-wear-bizarre-nickname-jerseys-in-2013.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://bingemagazine.com/wp-content/uploads/2014/02/BINGEMagazine-DennisRodman.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
</div>
<!-- Item Ends -->
<div class="control">
Prev |
Next
</div>
</div>
CSS:
.slider {
margin: 20px;
}
.content-wrap {
display: block;
//height: 400px;
text-decoration: none;
}
.image {
height: 175px;
overflow: hidden;
img {
height: 100%;
}
}
.details {
padding: 20px 10px;
background-color: #fff;
color: #000;
h4 {
font-size: 18px;
font-weight: bold;
}
.sub-title {
font-size: 16px;
}
.text {
font-size: 14px;
}
}
.control {
padding-top: 50px;
text-align: center;
}
JS:
$(document).ready(function() {
$('#main-slider').cycle({
paused: true,
autoHeight: 'calc',
slides: '> .item',
fx: 'scrollHorz',
next: '.control .next',
prev: '.control .prev',
sync: true
});
});
What am I doing wrong here?
I have a sneaky suspicion it has something to do with using Bootstrap columns on the items inside the slides, but not sure how to fix it.
I'm having a little trouble getting this work, any help would be greatly appreciated.
When the user clicks the X the div should close, but it also closes when they click outside of the wrapper container.
I can't seem to get them both to work. The X currently isn't closing anything.
jsFiddle(sorry it's not the cleanest, but it has the HTML): https://jsfiddle.net/t0mr4psf/1/
Gif for it in action: http://imgur.com/G7h4j6g
My jQuery:
jQuery(document).ready(function($) {
$('a.open-answer').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$('.wrapper').removeClass('active');
$(this).parents('.wrapper').toggleClass('active');
});
$('.question-container .wrapper:not(.active)').on('click', function(event) {
if ( !$(this).hasClass('active')) {
event.preventDefault();
$('a.open-answer', $(this)).click();
return false;
}
});
$(this).click(function() {
$('.wrapper').removeClass('active');
});
$('.wrapper').click(function(event){
event.stopPropagation();
});
});
I think I found an answer for you, but it's still not clear based on your description and image. Working Example: https://jsfiddle.net/Twisty/mqj1fnn6/6/
HTML
<div id="content" class="site-content">
<div id="primary" class="content-area container-fluid">
<main id="main" class="site-main" role="main">
<div class="no-gutters why-school-qa">
<div id="question1" class="question-container">
<div class="wrapper has-media">
<div id="q-1" class="question">
<div id="qa-image-1" class="qaimage">
<img class="img-responsive" alt="" src="http://placehold.it/350x350" />
</div>
<h4 class="qaheader">Header</h4>
<h3 class="qaquestion">This is a Question</h3>
<div id="a-1" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="#">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
<div id="q-2" class="question-container">
<div class="wrapper has-media">
<div class="question">
<div class="qaimage">
<img class="img-responsive" alt="" src="http://placehold.it/350x350" />
</div>
<h4 class="qaheader">Another Header</h4>
<h3 class="qaquestion">Oh look, another question?</h3>
<div id="a-2" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="http://www.fodors.com" target="_blank">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
<div id="q-3" class="question-container">
<div class="wrapper has-media">
<div class="question">
<div class="qaimage">
<img class="img-responsive" alt="" src="http://placehold.it/350x350" />
</div>
<h4 class="qaheader">Sweet Header!</h4>
<h3 class="qaquestion">Questions with answers and stuff?</h3>
<div id="a-3" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="http://lipmanhearne.com">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
<div id="q-4" class="question-container">
<div class="wrapper has-media">
<div class="question">
<div class="qaimage">
<img class="img-responsive" alt="" src="http://placehold.it/350x350" />
</div>
<h4 class="qaheader">Header and more HEADERS!</h4>
<h3 class="qaquestion">Questions?!</h3>
<div id="a-4" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="#">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
<div id="q-5" class="question-container">
<div class="wrapper has-media">
<div class="question">
<div class="qaimage">
<img class="img-responsive" alt="" src="http://placehold.it/350x350" />
</div>
<h4 class="qaheader">Hmmmm?</h4>
<h3 class="qaquestion">Ok, got it. Makes sense</h3>
<div id="a-5" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="#">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
<div id="q-6" class="question-container">
<div class="wrapper has-media">
<div class="question">
<div class="qavideo">
<iframe width="640" height="360" src="https://www.youtube.com/embed/zVXnoIoWu88?feature=oembed" frameborder="0" allowfullscreen></iframe>
</div>
<h4 class="qaheader">I am the header now!</h4>
<h3 class="qaquestion">I'm questioning the question</h3>
<div id="a-6" class="answer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod<br />tempor incididunt ut labore et dolore magna aliqua.</p>
<a class="btn btn-blue" href="#">This is a link</a>
</div>
<i class="ti-plus">+</i>
</div>
</div>
</div>
</div>
</main>
<!-- #main -->
</div>
<!-- #primary -->
</div>
<!-- #content -->
JQUERY
$(document).ready(function () {
$('a.open-answer').click(function (e) {
e.preventDefault();
e.stopPropagation();
var self = $(this);
var isOpen = (self.text() == "x");
$("a.open").not(self).click();
if(!isOpen){
self.text("x").addClass("open");
$($(this).attr("href")).addClass("open");
} else {
self.text("+").removeClass("open");
$($(this).attr("href")).removeClass("open");
}
$(self.attr("href")).toggle();
});
$('.question-container .wrapper').click(function (e) {
e.preventDefault();
$('a.open-answer', $(this)).click();
});
$(this).click(function () {
$('a.open').click();
});
$('.wrapper').click(function (e) {
e.stopPropagation();
});
});
Giving each Question and Answer their own unique ID can be helpful for selection. The Classes can be helpful in dealing with groups or when trying to select an unknown target.
Basically doing a manual toggle here. First we capture details about the item that was clicked in self and isOpen. Next, we close any other items that are .open. Then we return to self and open it.
How would you go about keeping the comments in a card open by default..? As of now here's my code:
<div class="card">
<h3 class="card-heading simple">Simple News Card</h3>
<div class="card-body">
...
</div>
<div class="card-comments">
<div class="comments-collapse-toggle">
<a data-toggle="collapse" data-target="#c1-comments" href="#c1-comments">34 comments <i class="icon-angle-down"></i></a>
</div>
<div id="c1-comments" class="comments collapse">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" data-src="holder.js/28x28" alt="avatar"/>
</a>
<div class="media-body">
<h4 class="media-heading">Comment title</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam...</p>
</div>
</div>
</div>
</div>
</div>
(copied from Bootplus)
But the comments are hidden by default and when you click on the 34 comments link, the comments toggle between open and close..
How would i keep it open by default?
DEMO (The first example)
If you can modify the HTML you can do this:
<div id="c1-comments" class="comments in collapse" style="height: auto">