Here’s something I find myself needing to do often enough that it warrants a post. Here’s the situation…
I am dynamically displaying an unknown number of data items. The item itself is unimportant for this post, however, the item may contain some attributes that shouldn’t be displayed on the page all the time. Perhaps it’s a long description or information about how the item was last updated. Whatever it is, this data is better to be hidden unless someone actually wants to see it. This may be a good use case for some sort of panel that slides out when an “info” icon or “>>” button is clicked.
Making this happen with jQuery is pretty simple and consists of a few steps:
- Wire up a “click” event to the button or text from where the panel will slide.
- Using the clicked on element as an anchor, use jQuery’s offset() method to get the coordinates.
- Either clone an existing element, such as a DIV, or create one on the fly and assign the following CSS rules to it:
- Position – This should be set to absolute so the panel displays relative to its containing element.
- Top – The distance in pixels, from the top of the containing element, where the panel should be placed.
- Left – The distance in pixels, from the left of the containing element, where the panel should be placed.
- Append the new panel to the container that is holding the list of data items.
- Display the panel using a cool effect – or hide it.
A couple of notes before we get to the example. First, there are 2 ways to get an element’s position in jQuery – offset() and position(). You can read the descriptions to understand what they both do, but offset() typically works for me. I’m also using the ‘slide’ toggle effect from jQuery UI to slide my panel from left to right with the toggle() method.
Now for an example:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//either get data from a service here or have it ready from server-side code
});
function showMoreInfo(anchor,itemId)
{
//make a jQuery object
anchor = $(anchor);
//the dynamic ID of the moreInfo panel
var panelId = 'moreInfo_' + itemId;
//see if the panel already exists
var info = anchor.parent().parent().find('#' + panelId);
if(!info.length){
//the panel doesn't exist, so create it
//get the coordinates from our anchor
var coords = anchor.offset();
//clone our info panel, or use jQuery templates
info = $('#moreInfoPanel').clone();
info.find('#description').html('<b>Get this data based on the itemId</b>');
info.find('#lastUpdated').html('<b>Get this data based on the itemId</b>');
//set the new dynamic ID
info.attr('id',panelId);
//now set the CSS to make the panel display where we want
info.css({
position: 'absolute',
top: coords.top-(info.height()),
left: coords.left+anchor.width() + 15
});
//append the panel to the item div
anchor.parent().parent().append(info);
}
//use the jquery UI slide definition
info.toggle('slide',function(){
//slide callback to change the button text depending on the state
if(info.is(':visible')){
anchor.html('<< Less'); }else{ anchor.html('More >>');
}
});
}
</script>
<body> <div id='moreInfoPanel' style='display:none;background:silver;padding:20px;'> <div id='description'></div> <div id='lastUpdated'></div> </div> <div id='dataItems'> <!-- this is an example data item. this would be generated dynamically server side or from a web service --> <!-- jQuery Templates could be nice here --> <div id='dataItem_ITEMID' class='dataItem' style='border:1px solid black;width:200px'> <div style='text-align:right'> <!-- wire up the click event --> <button onclick='javascript:showMoreInfo(this,"ITEMID");'>More >></button> </div> <hr/> <div> Main content goes here </div> </div> </div> </body>
