Skip to main content

Posts

Showing posts with the label Expand

Expand & colabs

Here is the first part without cookies... <?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>Example</title> <script type="text/javascript"> //<![CDATA[ function change(id, newClass) { identity=document.getElementById(id); identity.className=newClass; } //]]> </script> <style type="text/css"> div.toggle { display: none; } div.toggleshow { background: #fff; border: #000 solid 1px; color: #000; display: block; } </style> </head><body> <div> <a href="#" onclick="change('toggle1', 'toggleshow');">Show toggle1</a> <br /> <a href="#" onclick="change('toggle2', 'togglesho
Post a Comment
Read more

Expand-collapse toggle panel (div) using jquery

In this post, I’ll show you how easy it is to show expandable and collapsible toggle panel using jQuery. When you click on the heading, the content gets displayed by sliding and when you again click on the heading again, it gets collapsed. View LIVE DEMO Now let’s look at the html code, <div class="msg_list"> <p class="msg_head">Header-1 </p> <div class="msg_body"> orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div> <p class="msg_head">Header-2</p> <div class="msg_body"> orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div> <p class="msg_head">Header-3</p> <div class="msg_body"> orem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit </div> </di
Post a Comment
Read more