Skip to main content

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', 'toggleshow');">Show toggle2</a>
</div>
<div class="toggle" id="toggle1">
<p>This is toggle1.</p>
</div>
<div class="toggle" id="toggle2">
<p>This is toggle2.</p>
</div></body>
</html>
I still have to add the cookie part which should take me less then an hour perhaps. ;)

simple code:-

<dl>
<dt><a onclick="switchMenu('myvar');">Swtich link</a></dt>
<dd id="myvar">Content</dd>
</dl>
function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display!= 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
} 




Try this one out. No ids used. It could be part of a cookie-based persistence system, if the cookie stored the index of the <dd> element in the list.

<html><head>
<style type="text/css">.togList
{
  font-family: verdana;
}

.togList dt
{
  cursor: pointer; cursor: hand;
}

.togList dt span
{
  font-family: monospace;
}

.togList dd
{
  width: 200px;
  padding-bottom: 15px;
}

html.isJS .togList dd
{
  display: none;
}

</style>
<script type="text/javascript">

/* Only set closed if JS-enabled */
document.getElementsByTagName('html')[0].className = 'isJS';

function tog(dt)
{
  var display, dd=dt;
  /* get dd */
  do{ dd = dd.nextSibling } while(dd.tagName!='DD');
  toOpen =!dd.style.display;
  dd.style.display = toOpen? 'block':''
  dt.getElementsByTagName('span')[0].innerHTML
    = toOpen? '-':'+' ;
}
</script>

</head><body>

<dl class="togList">
  <dt onclick="tog(this)"><span>+</span> Header 1</dt>
  <dd>
    <p>Info info info info Info info info info
    Info info info info Info info info info</p>
    <p>Info info info info Info info info info
    Info info info info Info info info info</p>
  </dd>
  <dt onclick="tog(this)"><span>+</span> Header 2</dt>
  <dd>
    <p>Info info info info Info info info info
    Info info info info Info info info info</p>
    <p>Info info info info Info info info info
    Info info info info Info info info info</p>
  </dd>
</dl></body>
</html>


Next one:-


To elaborate on my previous post, here's a quick and dirty but working example. It uses a UL for the menu. The function showMenu loops through the collection of LIs and shows or hides them. The (clickable) listitem with class="header" will always be shown.

<script type="text/javascript">
<!--
var aPrefix = 'pr';

function getCurrentState(mID) {
// returnvalues: 1 (closed), 2 (opened)
return document.cookie.substr(document.cookie.indexOf(mID+'=') + mID.length +1, 1);
}

function initMenu(mID) {
// make the header clickable, assign an ID
var kids = document.getElementById(mID).childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className == 'header') {
kids[i].onclick = toggleMenu;
kids[i].id = aPrefix + mID;
}
}
// show or hide the menu
showMenu(mID);
}

function showMenu(mID) {
var currentState = getCurrentState(mID);
document.getElementById(aPrefix+mID).title = (currentState == 1? 'show' : 'hide') + ' this menu';
document.getElementById(aPrefix+mID).style.cursor = 'pointer';
var kids = document.getElementById(mID).childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].tagName == 'LI' && kids[i].className!= 'header') {
kids[i].style.display = currentState == 1? 'none' : 'block';
}
}
}

function toggleMenu(e) {
if (window.event) e = window.event;
var mID = e.srcElement? e.srcElement.id : e.target.id;
mID = mID.substr(aPrefix.length);
// write the cookie
var oneyear = new Date(); oneyear.setFullYear(oneyear.getFullYear() + 1);
document.cookie = mID + '=' + (getCurrentState(mID) == 1? 2 : 1) + '; expires=' + oneyear.toGMTString() + '; path=/';
// show or hide the menu
showMenu(mID);
}
// -->
</script>

<ul id="menu2">
<li class="header">Header</li>
<li><a href="/foo.html">&raquo; foo</a></li>
<li><a href="/bar.html">&raquo; bar</a></li>
</ul>
<script type="text/javascript">initMenu('menu2');</script> 


Labels:

Comments

Post a Comment

Popular posts from this blog

உடல் எடையை குறைக்க வேண்டுமா ?

இன்றைய அவசர உலகின் மிக பெரிய பிரச்சனையாக இருப்பது உடல் எடை அதிகரிப்பது தான்.மனம் போன போக்கில் உணவு கட்டு பாடு இல்லாமல் கண்டதையும் உள்ளே தள்ளுவதும்,உக்காந்த இடத்திலேயே கணணி முன் நேரத்தை விரயமாக்குவதும் தான் இந்த பிரச்சனைக்கு மூல காரணமாகும். அது சரி இந்த பிரச்சனையை எப்படி இல்லாமல் செய்வது அல்லது உடல் எடையை எவ்வாறு குறைப்பது என்பதை பற்றி பாப்போம் , பல வருட ஆரய்சிக்குபின் மருத்துவர்கள்   உடல் எடைய குறைக்க மிகவும் சுலபமான உடற்பயிற்சியை கண்டுபிடித்துள்ளனர்.இது  100% பயனளிக்க கூடியது, எந்த இடத்திலும் எந்தநேரத்திலும் மிக சுலபமா செய்ய கூடிய உடற் பயிற்சியாகும்.இந்த உடற்பயிற்சிகள் படத்துடன் கீழே தரப்பட்டுள்ளது நீங்களும் முயற்சித்து பாருங்கள கண்டிப்பாக பலன் கிடைக்கும்... முதலில் நாற்காலியில் உட்கார்ந்து இட  பக்கம் பார்கவும் .. ..        அடுத்து  நாற்காலியில் உட்கார்ந்து வல  பக்கம் பார்கவும்  ....  நண்பர்கள் யாரவது மச்சி வாடா சின்ன பீஸ் ,இங்க பாரு சூப்பர் அய்டம்னு சொல்லி கால்ல விழுந்து கூப்பிட்டலோ மேற்கூறிய உடற் பயி...
Post a Comment
Read more

(Loot again) Get Mi Earphones & Mi Backpack In Just Rs.1

How to Get Mi Band , Mi Earphones & Mi Backpack In Just Rs.1 1, First Of All Just  Click On Below Links 1 By 1  Click 1->  Mi City Backpack Dark Grey Minimalist sleek design  -In Just Rs.1 Click 2->  Mi Earphones Silver Dynamic bass sound  -In Just Rs.1 2. Now Open All Links 1 By 1 3. After Opening The Link Click On “ Click to Bring The Price Down ” Then Click “ I Want it too ” 4. Login into Your Mi Account ( Or Sign Up  –  New Mi Account Giving Huge Price drop Like Rs.50 Or Rs.70 Drop , So Recommend You to Make New Account ) 5. Now You will See 3 Products There In this  Mi 24 Hour Madness Sale  6. Click On “ Participate ” Now Button & Share The Link With Your Friends When Each Friend Click On Your Link , You Will See Some Price cut in Your Products… Finally After Enough Click Your Product Will be Available For Just Rs.1  7. Start Referring , Start Looting MI
Post a Comment
Read more

30 Essential Free Magento Extensions

Magento is a popular open source platform to built your ecommerce website. It is based on Zend Framework and has a very flexible architecture. Although it is much younger than many of its competitors, Magento has a large community of users.  Developers can easily built plugins or templates for Magento, which makes it more and more popular among open source ecommerce solutions. here are loads of great extensions for Magento to help take your internet store to the next level. 1.  Remerce CMS Meta Robots Set the Robots Meta Tags for Cms pages This module add the option to set the Robots Meta for CMS pages. Go to CMS =>Manage Pages Select a page and go to the tab "Meta Data" Under Robots you can set the Robots Meta Tag 2.  Fooman Google Analytics Plus This is a beta release - please report how this extensions works for you. Current improvements:     * * Track every individual page - including sections retrieved via AJAX during one-page-checko...
4 comments
Read more