Solved

Help getting div to expand to show full details

Posted on 2015-01-30
7
200 Views
Last Modified: 2015-01-30
Hi,
    I have a simple div with a border, within the div is some text - I want to however halve the size of this box and perhaps add a button, which when clicked will display the full text, then allow to be shrunk again.

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 2</title>

<style>

#wrapper {
    width: 250px; height: 125px;
    border-radius: 10px;
    overflow: hidden;
    position:absolute;
    border: 2px solid #72D874;
    margin-top: 30px;
  
    float:right;
}

#box {
    width: 250px; height: 125px;
    background-color: #BEFFC0;
}

</style>

</head>

<body>

<div id="wrapper">
    <div id="box">
    <div style="font-family:Arial; font-size: 12pt; text-align: center;"><u><b>Key Information</b></u></div>
    <div style="font-family:Arial; font-size: 10pt; text-align: left; margin-top: 15px; margin-left: 7px;"><em><b>Name</b></em> - Persons Name</div>
    <div style="font-family:Arial; font-size: 10pt; text-align: left; margin-left: 7px;"><em><b>Email</b></em> - Registered email address</div>
    <div style="font-family:Arial; font-size: 10pt; text-align: left; margin-left: 7px;"><em><b>Username</b></em> - Used for logging on</div>
    <div style="font-family:Arial; font-size: 10pt; text-align: left; margin-left: 7px;"><em><b>Active</b></em> - 1 for access / 0 to disable</div>
    <div style="font-family:Arial; font-size: 10pt; text-align: left; margin-left: 7px;"><em><b>Access</b></em> - Access level granted</div>
    </div>
</div>

</body>

</html>

Open in new window


I have added the attached working code to show the div panel and text - so imagine the div showing on page, but only down to Username - then when clicked the rest would appear...

Can anyone help?

Thanks in advance.

Damian
0
Comment
Question by:damianb123
  • 4
  • 3
7 Comments
 
LVL 9

Expert Comment

by:WebDevEM
ID: 40580274
Hi Damian,

I've set up a Fiddle at http://jsfiddle.net/webdevem/rzkxhpLc/ with an example of one way to do this (there are many variations).  In short,
Set the initial height to 80px
Set up a jQuery function when the DIV is clicked, which looks at the current height and sets it to either shorter or taller depending on which sate it is currently in.
$('#wrapper').click(function () { 
    console.log ($('#wrapper').css('height'));
switch($('#wrapper').css('height') )
{ 
case '80px': 
        $('#wrapper').css('height','125px');
break; 
case '125px':
        $('#wrapper').css('height','80px');

break; 
default: 

}
});

Open in new window

I hope this helps!

WebDevEM
0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 40580277
I just re-read your initial question and saw that you wanted  button, not the actual DIV to trigger it... I'm updating the Fiddle and will show the new code in a minute...
0
 
LVL 9

Expert Comment

by:WebDevEM
ID: 40580286
Assuming there is a button like this:
<input id="toggleKeyInfo" type="button" value="Toggle Key Information">

Open in new window

the new jQuery would be:
$('#toggleKeyInfo').click(function () { 
switch($('#wrapper').css('height') )
{ 
case '80px': 
        $('#wrapper').css('height','125px');
break; 
case '125px':
        $('#wrapper').css('height','80px');

break; 
default: 

}

Open in new window

0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

Author Comment

by:damianb123
ID: 40580344
this is great, just what I needed - thanks.  Just one quickie.....  On my main php page it's not working, could it be because I have the javascript in the head section, does it need to be below the divs?

Cheers
0
 
LVL 9

Accepted Solution

by:
WebDevEM earned 500 total points
ID: 40580361
Where the code sits on the page won't impact it working or not working, but jQuery needs to be wrapped in this little job to set it up so that it runs after the whole page has finished loading:
$(document).ready(function() { 
     $('#toggleKeyInfo').click(function () { 
          switch($('#wrapper').css('height') )
          { 
          case '80px': 
               $('#wrapper').css('height','125px');
          break; 
          case '125px':
               $('#wrapper').css('height','80px');
          break; 
          default: 
     }
     });
});

Open in new window

The Fiddle site does that work for you already, so I didn't include it in my sample code.   That $(document).ready tells the browser to wait until everything has finished loading before it attaches the click function. Otherwise it tries to attach it before the DIV exists and won't work.
0
 

Author Comment

by:damianb123
ID: 40580374
Doh!  You know what it was.....  I failed to add the Jquery CDN from Google - so it wasn't loading it!  Working not like a treat.  Thanks for all your time on this, really appreciate it.
0
 

Author Closing Comment

by:damianb123
ID: 40580375
Great help, really helpful person.
0

Featured Post

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…

766 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question