Solved

Help getting div to expand to show full details

Posted on 2015-01-30
7
197 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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

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

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

707 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now