...

View Full Version : Toggle content



marisa1981
05-11-2009, 01:25 PM
Hi,

I have this script which allows me to toggle between divs which works fine. What I need to ask is how I replace the content which is showing..... FAQ question #2, FAQ question #3 and so on with content containing paragraphs and images. Any help would be very much apreciated




<html>
<head>
<title>Multiple DIV</title>
<style type="text/css">
DIV.db {
display:none;
border : 1px solid blue;
width : 400px;
height : 400px;
}

img {border:none;}
</style>
<script type="text/javascript">
function CreateDIV(n) {
var str = '';
for (i=0; i<n; i++) {
// str += '<DIV id="DB'+i+'" style="display:none; border: 1px solid blue">';
str += '<DIV id="DB'+i+'" class="db">';
str += 'FAQ question #'+(i+1)+'</DIV>';
}
document.write(str);
}
function Toggle(IDS,n) {
for (i=0; i<n; i++) { document.getElementById('DB'+i).style.display='none'; }
document.getElementById('DB'+IDS).style.display = 'block';
}
</script>
</head>
<body onLoad="Toggle(0,10)">
<a href='#' onClick="Toggle(0,10)">FAQ #1</a>
<a href='#' onClick="Toggle(1,10)">FAQ #2</a>
<a href='#' onClick="Toggle(2,10)">FAQ #3</a>
<a href='#' onClick="Toggle(3,10)">FAQ #4</a>
<a href='#' onClick="Toggle(4,10)">FAQ #5</a>
<a href='#' onClick="Toggle(5,10)">FAQ #6</a>
<a href='#' onClick="Toggle(6,10)">FAQ #7</a>
<a href='#' onClick="Toggle(7,10)">FAQ #8</a>
<a href='#' onClick="Toggle(8,10)">FAQ #9</a>
<a href='#' onClick="Toggle(9,10)">FAQ #10</a>
<p />
<script type="text/javascript">
CreateDIV(10); // used only as a test -- fill in with useful information
</script>
</body>
</html>

Sphynx
05-11-2009, 01:41 PM
You're doing over-kill on the divs. Just track what you have visible and don't loop.

Ie:

var current = 0;

function Toggle(toTog) {
obj = document.getelementById(toTog);
if( obj ) {
if( current ) current.style.display = "none";
obj.style.display = "block";
current = obj;
}
}

Create links:

<a href="javascript:Toggle('somethingToDo');">Click Here</a>
<a href="javascript:Toggle('somethingToSee');">Click Here</a>

Then it's as simple as creating a div.

<div id="somethingToDo" style="display: none">Something to Do</div>
<div id="somethingToSee" style="display: none">Something to See</div>

marisa1981
05-11-2009, 02:05 PM
I have tried what you suggested but it doesn't seem to work! I get an error:document.getelementById is not a function
[Break on this error] obj = document.getelementById(toTog);

Here is the code I have



<html>
<head>
<title></title>
<style type="text/css">

img {border:none;}

#tab-nav {
margin: 0px 0 15px 275px;
padding: 0;
height:36px;
width:475px;
float: left;
list-style-type: none;

}
#tab-nav li {
float: left;
}
#tab-nav li a {
display: block;
height: 32px;
text-indent: -9999px;
}

#tab-nav li.facebook a {
width:80px;
height:36px;
background:url(facebook-tab.gif);
}

#tab-nav li.facebook a.selected {
width:80px;
height:36px;
background:url(facebook-tab-red.gif);
}

#tab-nav li.twitter a {
width: 75px;
height:36px;
background:url(twitter-tab.gif);
}

#tab-nav li.twitter a.selected {
width: 75px;
height:36px;
background:url(twitter-tab-red.gif);
}
#tab-nav li.picasa a {
width: 65px;
height:36px;
background:url(picasa-tab.gif);
}

#tab-nav li.picasa a.selected {
width: 65px;
height:36px;
background:url(picasa-tab-red.gif);
}

#tab-nav li.bookmarking a {
width: 101px;
height:36px;
background:url(bookmarking-tab.gif);
}

#tab-nav li.bookmarking a.selected {
width: 101px;
height:36px;
background:url(bookmarking-tab-red.gif);
}

#tab-nav li.youtube a {
width: 76px;
height:36px;
background:url(youtube-tab.gif);
}

#tab-nav li.youtube a.selected {
width: 76px;
height:36px;
background:url(youtube-tab-red.gif);
}

#tab-nav li.blogs a {
width: 56px;
height:36px;
background:url(blogs-tab.gif);
}

#tab-nav li.blogs a.selected {
width: 56px;
height:36px;
background:url(blogs-tab-red.gif);
}

#facebook {display:none;
position:relative;
top:40px;
left:-475px;}
#twitter {display:none;
position:relative;
top:40px;
left:-475px;}
#picasa {display:none;
position:relative;
top:40px;
left:-475px;}
#bookmarking {display:none;
position:relative;
top:40px;
left:-475px;}
#youtube {display:none;
position:relative;
top:40px;
left:-475px;}
#blogs {display:none;
position:relative;
top:40px;
left:-475px;}

</style>
<script type="text/javascript">
var current = 0;

function Toggle(toTog) {
obj = document.getelementById(toTog);
if( obj ) { if( current ) current.style.display = "none"; obj.style.display = "block"; current = obj; }
}
function applySelectedTo(link) {
var ul = document.getElementsByTagName("ul")[0];
var allLinks = ul.getElementsByTagName("a");
for (var i=0; i<allLinks.length; i++) {
allLinks[i].className = "";
}
link.className = "selected";
}
</script>
</head>
<body>
<ul id="tab-nav">
<li class="facebook"><a href="javascript:Toggle('facebook');" onclick="applySelectedTo(this);return;"><img src="facebook-tab.gif" alt="facebook"></a></li>
<li class="twitter"><a href="javascript:Toggle('twitter');" onclick="applySelectedTo(this);return;"><img src="twitter-tab.gif" alt="twitter"></a></li>
<li class="picasa"><a href="javascript:Toggle('picasa');" onclick="applySelectedTo(this);return;"><img src="picasa-tab.gif" alt="Picasa"></a></li>
<li class="bookmarking"><a href="javascript:Toggle('bookmarking');" onclick="applySelectedTo(this);return;"><img src="bookmarking-tab.gif" alt="Bookmarking"></a></li>
<li class="youtube"><a href="javascript:Toggle('youtube');" onclick="applySelectedTo(this);return;"><img src="youtube-tab.gif" alt="youtube"></a></li>
<li class="blogs"><a href="javascript:Toggle('blogs');" onclick="applySelectedTo(this);return;"><img src="blogs-tab.gif" alt="blogs"></a></li>
</ul>

<div id="facebook" style="display: none">Here is some facebook content Here is some facebook content Here is some facebook content Here is some facebook content Here is some facebook content</div>
<div id="twitter" style="display: none"><p>Here is some twitter content</p></div>
<div id="picasa" style="display: none"><p>Here is come picasa content</p></div>
<div id="bookmarking" style="display: none"><p>Here is some bookmarking content</p></div>
<div id="youtube" style="display: none"><p>Here is some youtube content</p></div>
<div id="blogs" style="display: none"><p>Here is some blog content</p></div>



</body>
</html>

Sphynx
05-11-2009, 02:47 PM
My apologies, it's case sensitive, and I typo'd. getElementById



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum