Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Help getting div to expand to show full details

Posted on 2015-01-30
7
Medium Priority
?
207 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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 2000 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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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!
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 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 …

636 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