Solved

Help getting div to expand to show full details

Posted on 2015-01-30
7
203 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 

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

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

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

So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

705 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