CODEWITHSUNDEEP
javascripthtmlcss
Danni_B
Danni_B

Reputation: 41

Using div to expand with new information when "read more" is clicked and a close link to close it

I have a website with a few div tags, i want it to expand with new information when the user clicks read more and a close link to close it. I don't know how to use jQuery so JavaScript or/and css code would be helpful. I have searched about the subject but nothing to my exact needs have come up. Here is two of my div's as an example, i have edited this, but the expanded content does overlaps the rest of my content, any ideas?:

html:

<div class="servicesBox">

<p><b><u>Personal Breakthrough Sessions</u></b>
<br>
<i>“The secret of change is to focus all of your Energy, not on fighting the old, but on building the new.”</i>
<br>
    <b>Socrates  &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;    

    <a aiotitle="click to expand" href="javascript:togglecomments('UniqueName')"
>    <u>Read more</u></a><br />
<div class="commenthidden" id="PBScontent"
>You know when you are ready to breakthrough what has been holding you back to be and do something more. A Breakthrough Session is one full day or 2 half days (within 2 days) where Louise supports you through identifying what has been limiting you and then by using the tools from Strategic Intervention, NLP, Time Line Therapy and Hypnosis training, helps you break down the barriers and create new options to start you on a journey to achieve what you want. Louise will work with you to devise a plan, and making you accountable by requesting that some immediate action is taken, as accountability is put in place. In addition will arrange follow – up sessions to determine how you are progressing, holding the client accountable for planned actions. A worthwhile investment to lasting change and success in all areas of your life.</div></b> </p>   
</div>

<div class="servicesBox">
    <p><b><u>Relationship and Family Coaching</u></b>
    <br>
    <i>“A real decision is measured by the fact that you've taken a new action. If there's no action, you've haven't truly decided"</i>
    <br>
    <b>Tony Robbins &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <u>Read more</u></b></p>    
    </div>

javascript:

//utility to set opacity
function setOpacity(e,v)
{
e.style.opacity = v;
e.style.filter = "alpha(opacity=" + (v*100) + ")";
}

function togglecomments (postid) {
var whichpost = document.getElementById(postid);
if (whichpost.className=="commentshown") { whichpost.className="commenthidden"; } else {      whichpost.className="commentshown"; }
}

css:

.demo {
  background: #969696;
  width: 690px;
  height:300px;
  color: white;
  font-size: 50px;
  position:absolute;
}
#debug
{
    position:absolute;
    top:350px;
}

.commenthidden {display:none}
.commentshown {display:inline}

Upvotes: 1

Views: 139

Answers (2)

MattD
MattD

Reputation: 4420

I know you said you don't know jQuery, but I made a solution using it anyway because it's actually very easy to implement.

HTML:

 <div class="servicesBox">

    <p><b><u>Personal Breakthrough Sessions</u></b>
    <br>
    <i>“The secret of change is to focus all of your Energy, not on fighting the old, but on building the new.”</i>
    <br>
        <b>Socrates  &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;    

        <a id="clickme" href="#"><u>Read more</u></a><br />
<div id="PBScontent" class="commenthidden"
    You know when you are ready to breakthrough what has been holding you back to be and  do something more. A Breakthrough Session is one full day or 2 half days (within 2 days) where Louise supports you through identifying what has been limiting you and then by using the tools from Strategic Intervention, NLP, Time Line Therapy and Hypnosis training, helps you break down the barriers and create new options to start you on a journey to achieve what you want. Louise will work with you to devise a plan, and making you accountable by requesting that some immediate action is taken, as accountability is put in place. In addition will arrange follow – up sessions to determine how you are progressing, holding the client accountable for planned actions. A worthwhile investment to lasting change and success in all areas of your life.</div></b> </p>   
    </div>

    <div class="servicesBox">
        <p><b><u>Relationship and Family Coaching</u></b>
        <br>
        <i>“A real decision is measured by the fact that you've taken a new action. If there's no action, you've haven't truly decided"</i>
        <br>
        <b>Tony Robbins &nbsp; &nbsp; &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <u>Read more</u></b></p>    
        </div>

jQuery:

$(document).ready(function () {
    $("#clickme").click(function () {
        $("#PBScontent").slideToggle("slow")
    });
});

CSS:

.demo {
    background: #969696;
    width: 690px;
    height:300px;
    color: white;
    font-size: 50px;
    position:absolute;
}
#debug {
    position:absolute;
    top:350px;
}
.commenthidden {
    display:none
}
.commentshown {
    display:inline
}

The jQuery calls the .slideToggle feature on the div when the link is clicked. Your content then slides up or down when the link is clicked. Just refer to one of the public instances of the jQuery library on your site, and you should be good to go.

JSFiddle for an example.

If you wanted some kind of fade effect instead, you can switch .slideToggle for .fadeToggle in the jQuery code.

Upvotes: 1

Dark Knight
Dark Knight

Reputation: 8347

To see how it is done using JQuery, have a quick look at this tutorial

Upvotes: 0

Related Questions