I am attempting to replicate the functionality seen on the website. The issue I am facing is related to the event_content class. I want to display only a limited amount of content initially, and then hide the excess content. Upon clicking the plus class, I would like to reveal all the hidden content.
$(document).ready(function(){
$(".plus").click(function(){
alert('hi sudheer');
$(".event_content").slideDown("slow");
});
});.event_profit{
background: #ecece9;
width: 100%;
float: left;
border-bottom: 2px solid #fff;
height:180px;
}
.plus{
width:5%;
margin-top: 5%;
margin-left: 5%;
}
.event_content p{
margin: 10px 0;
}
.maincontainer{
width:100%;
display: -webkit-inline-box;
}
.event_image{
width: 15%;
margin-left: 2%;
margin-top:1%;
}
.event_content{
width: 70%;
margin-top: 2%;
margin-left: 2%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="event_profit">
<div class="maincontainer">
<div class="event_image">
<img src="http://www.charitywater.org/blog/../../_files/blog/wp-content/uploads/2015/03/blog-charity-water-thank-you-instameets.png" class="img-circle" style="height:150px;width:150px">
</div>
<div class="event_content">
<p>
</p>
<p> Angelina Jolie Pitt recently announced that she has had her ovaries and fallopian tubes removed in order to reduce her risk of ovarian cancer.
Ms. Jolie Pitt had previous shared that she has a mutation in the BRCA gene, which increases her risk of breast and ovarian cancers.
The Alliance received many calls and requests to comment from media outlets; expand this story for links to some of our news coverage.
</p>
</div>
<div class="plus">
<img src="http://www.ovariancancer.org/wp-content/themes/ovariancancer/images/plus2.png" style="width:33px;height:33px;"/>
</div>
</div>
</div>