Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Adding Extra Information box

Posted on 2016-11-10
4
Medium Priority
?
55 Views
Last Modified: 2016-11-10
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?
0
Comment
Question by:Jasmine Ikhreishi
[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 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 41882505
With jQuery :
jQuery(function($) {
   $(".link_class").click(function(evt) {
         evt.preventDefault();
         $("#div_id").toggle();
   });
});

<a href="/fake" class="link_class">read more</a>
0
 
LVL 1

Author Comment

by:Jasmine Ikhreishi
ID: 41882512
I did this so far and it isnt working
	<div id="post">
<span class="collapsed">
 <a href="javascript:void(0)"> About>></a>
 <p> Hey how are you </p>
</span>

<span class="expanded">
 <a href="javascript:void(0)">Less>></a>
</span>
</div>

Open in new window


And my JS code is:
$(document).ready(function() {
    $(".expanded").hide();

    $(".expanded a, .collapsed a").click(function(eve) {
        var $container = $(this).parents("div");
        eve.preventDefault();
        $container.children(".expanded, .collapsed").toggle();
    });
});

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.
0
 

Expert Comment

by:Ryan Herndon
ID: 41882520
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;
});
0
 
LVL 59

Expert Comment

by:Julian Hansen
ID: 41882798
Here is a way to do it without JavaScript / JQuery
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>

Open in new window

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>

Open in new window

Working sample here
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

704 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