Jazzy 1012
asked on
Adding Extra Information box
I want to add on my webpage an "Click for more information"
For example:
Click for more info
And when someone clicks it a div appears with text, is there any way I could do this?
For example:
Click for more info
And when someone clicks it a div appears with text, is there any way I could do this?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
You can do this with the help of JavaScript/jQuery. My apologies, I'm typing this on my phone so there may be some errors, but hopefully it points you in the right direction.
Your button: <a href="#" class="your_classname">Click here for more info</a>
Your hidden div: <div id="div_id_here">content content content</div>
Hide the div by default: $('div_id_here').hide();
Bind the toggle event to the button:
$('your_classname').click(function(){
$('div_id_here').toggle();
return false;
});
Your button: <a href="#" class="your_classname">Click here for more info</a>
Your hidden div: <div id="div_id_here">content content content</div>
Hide the div by default: $('div_id_here').hide();
Bind the toggle event to the button:
$('your_classname').click(function(){
$('div_id_here').toggle();
return false;
});
Here is a way to do it without JavaScript / JQuery
CSS
CSS
<style type="text/css">
.infobox p {
padding: 15px;
}
.infobox {
border: 0;
border-radius: 10px;
height: 0;
overflow: hidden;
box-sizing: content-box;
}
input[type="checkbox"] {
display: none;
}
input:checked + .infobox {
height: auto;
border: 1px dashed #428bca;
}
</style>
HTML <label for="clickformore">Click for more information</label>
<input type="checkbox" id="clickformore" name="clickformore" />
<div class="infobox"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec facilisis lacus ut sapien sollicitudin vel hendrerit erat tempor. Proin massa justo, rhoncus vel eleifend ac, ultricies eget dui. Etiam sed lorem lacus. Phasellus auctor ultrices sapien. Vestibulum blandit, sapien eget eleifend consequat, nisl nunc pellentesque libero, in adipiscing dui odio a mauris. Curabitur et massa ut dolor aliquet auctor et fringilla lectus. Integer sit amet dolor felis. Suspendisse at magna eget risus gravida suscipit non vitae erat. Aenean dignissim rhoncus nulla, lobortis semper odio gravida vel. Mauris sed leo et tortor semper sagittis.</p></div>
Working sample here
ASKER
Open in new window
And my JS code is:
Open in new window
It shows the About and the less and the hey how are you. I want the Hey how are you to hide unless the user clicks the about, then the about to change to less when you reclick it and everything goes.