Solved

Help getting div to expand to show full details

Posted on 2015-01-30
7
199 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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

776 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