I have looked around for this help, but I am not really too sure how to describe it. But I will do my best :) I have a comment section that I have slide in and out using slideToggle(); and that works great. I use an arrow button to trigger that animation. The issue I am having is that when this slides down I want to have another div that shows up for 'Add Comment' and then to collapse with the comment section.
Here is my jsFiddle link:
The 'Missing Image' is the arrow I had described. That is what needs to be clicked.
html:
<div class="imageHolder">
<div class="image">
</div>
<div class="imageName">
Scrubby
</div>
<div class="imageDiscrp">
This is a cool image..!
</div>
<div class="comments" id="1st">
<h2 class="author">Tommy Lee Jones</h2>
<img src="images/dash.png"/>
<p>fjal;kjetrl lkajehtlaker hralkjhlak eralhrl;ka rlkah erhae lrhalkerhla khlkehralke hrlakeh rlkahrlkaehrlak hrlkh</p>
<h2 class="author">Tommy Lee Jones</h2>
<img src="images/dash.png"/>
<p>fjal;kjetrl lkajehtlaker hralkjhlak eralhrl;ka rlkah erhae lrhalkerhla khlkehralke hrlakeh rlkahrlkaehrlak hrlkh</p>
</div>
<div class="commentLine"></div>
<div class="commentArrow" href="#1st"><img src="images/arrowThick.png"/></div>
<div class="commentAdd" id="1st">Add Comment</div>
</div>
<div class="imageHolder">
<div class="image">
</div>
<div class="imageName">
Paper Girl
</div>
<div class="imageDiscrp">
This is a cool image..!
</div>
<div class="comments" id="2nd">
<h2 class="author">Tommy Lee Jones</h2>
<img src="images/dash.png"/>
<p>fjal;kjetrl lkajehtlaker hralkjhlak eralhrl;ka rlkah erhae lrhalkerhla khlkehralke hrlakeh rlkahrlkaehrlak hrlkh</p>
<h2 class="author">Tommy Lee Jones</h2>
<img src="images/dash.png"/>
<p>fjal;kjetrl lkajehtlaker hralkjhlak eralhrl;ka rlkah erhae lrhalkerhla khlkehralke hrlakeh rlkahrlkaehrlak hrlkh</p>
</div>
<div class="commentLine"></div>
<div class="commentArrow" href="#2nd"><img src="images/arrowThick.png"/></div>
<div class="commentAdd">Add Comment</div>
</div>
</div>
jQuery:
$(document).ready(function(){
$('.comments , .commentAdd').hide();
$('.commentArrow').click(function(){
var $this = $(this);
var port = $this.attr('href'); //finds the correct comment section
$(port).stop(); //stops animation if halfway through
$(port).slideToggle(300); //toggles the slide effect @ 300 milliSeconds
$this.toggleClass('rotate');
$('.commentAdd').toggle(300);
});//end Comment Slider
});//end ready function
css:
.content{
width: 60%;
position: relative;
background-color: #4D494B;
height: 1000px;
clear: left;
left: 5%;
overflow:hidden;
}
.container{
width:100%;
height:auto;
margin-top:2.5%;
overflow-y:hidden;
}
.imageHolder{
width:95%;
margin-left:2.5%;
margin-bottom:5%;
min-height:100px;
background-color:#fff;
}
.image{
text-align:center;
}
.image img{
padding:2%;
max-width: 85%;
}
.imageName{
padding-left: 2.5%;
padding-bottom: 1.5%;
display: block;
background-color: rgba(255, 255, 255, 0.53);
font-family: 'Noto Sans', sans-serif;
font-size: 2em;
font-weight: bold;
color:#4D494B;
}
.imageDiscrp{
display:block;
color: #858585;
padding-left: 2.5%;
padding-bottom: 1%;
}
.comments{
padding-left:2.5%;
padding-bottom:2.5%;
width:100%;
color: #CCC;
background-color: #4D494B;
}
.commentLine{
width:100%;
height:5px;
background-color:#F4812A;
}
.commentArrow{
float:right;
margin-right:2%;
width: 5%;
cursor:pointer;
}
.commentArrow img{
width: 100%
}
.comments img{
position: relative;
left: -2.5%;
top: -15px;
width: 1.5%;
}
.comments h2{
padding-top:2.5%;
}
.comments p{
padding-left:1%;
width:68%
}
.commentAdd{
display: block;
width: 11%;
text-align: center;
line-height: 37px;
height: 33px;
background-color: #F4812A;
color: #4D494B;
font-size: 0.9em;
float: right;
position: relative;
top: -35px;
right: 4%;
}
.rotate {
position: relative;
top: -31px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}