How am I able to do thissss? Options

[Jamesisgsnap]

Okay, So I realized I have a lot of content on my website.
So I asked a suggestion, and They told me to have it hidden, and pretty much people click on it to Bring the rest up, instead of going to a new page to get it all, it can just appear, and disappear by View more, or Hide the rest, etc.

http://ego-box.com/ - Their Content bar, the View more, How do you do that?

[999Murderdoll666]

CODE

<script language=javascript type='text/javascript'>
function hidediv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="hidden";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'hidden';
else // IE 4
document.all.hideshow.divs[i].visibility = 'hidden';
}
}
}

function showdiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){
if (document.getElementById)
divs[i].style.visibility="visible";
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.hideshow.divs[i].visibility = 'visible';
}
}
}
</script>

Put that script in your header and for the content you want to hide put them in a div
-ex.

CODE

<div id="whatever you name it">
Stuff you want to hide/show here
</div>

-
the link that hides the content is:

CODE

<a href="java script:hidediv('whatever you name it')">hide this div</a>

the link that shows the content is:

CODE

<a href="java script:showdiv('whatever you name it')">show this div</a>

I hope this helps you!:]

SOURCE

Reason for edit: Please use [codebox] and [code] tags respectively when posting codes. - Mike

[Jamesisgsnap]

Am I able to get ALITTLE bit more detail on where to place it, etc.

Plus, On my site, I have the Navigation section divided into 2 sections.
For it doesn't constantly scroll down, I have It divided in 2.
Left and right
http://gippersnaplyts.com - That's my site, how it is Seperate.

So more detail pelase?

[999Murderdoll666]

If im understanding correctly,you want to use the hide/show for your nav section?

In that case,ill try to explain where to put things.
As i said before,you put the script in the header of your site(i would do this by php looking at your site and seeing it has many pages,just to avoid the hassle of applying this to every single page).
I looked at the source,and i see you use DIVs,not tables(its hard to believe some people actually still use tables)just to make sure because it would probably be a different process.Just put the content you want hidden/shown in a regular div.
But the content in that section your want to be hidden and show when a link is clicked and hidden again when the other is clicked just needs to be put in a seperate div(from what you said im guessing it's already divided in two sections/divs,correct me if im wrong please).

CODE

<a href="java script:hidediv('whatever you name it')">hide this div</a>

You would put this link next to,on top of,under....just wherever you would like it to appear.It is what you click to hide it.

CODE

<a href="java script:showdiv('whatever you name it')">show this div</a>

Same goes for this link,it shows the content you wanted hidden until this link is clicked.Also,make sure you match the name in both links with the name of the div with the content in it just as you do when you style divs with css.
So these links,in a nutshell,the hide link is what the visitor would click to hide the content again after clicking the show link(by default its hidden,but can be changed to show then hidden -just fyi-).


I'm not the best explainer,so please forgive :].

Reason for edit: Please use [codebox] and [code] tags respectively when posting codes. - Mike

[Jamesisgsnap]

I have them Seperated Left and right, instead of Centered, Left or just right.
And it's fine, I understand....Lmao , Kinda makes no sense.
I'm not much of a good person with these, where it goes Lmao.
I know where the script goes, it goes under <head> and before </head>

But the other codes, what to name them, where to put the other codes.
And where to Put all the Links I want hidden, And keep the ones I want shown.

And then where I put the click-ons to View more, and Hide all, etc.

[Blyat]

I would contact mike, He prolly knows what to do

[Jamesisgsnap]

I didddd, but no response :(

[Mikeplyts]

I'd probably use jQuery for this. It makes the Javascript a lot more easier, and effects can be done smoother.

First of all, go to the jQuery website and download it. When you download it, use your FTP (File Transfer Protocol, or just any way to transfer files) to upload the .JS file to your website. Next, in the <head></head> tags of your HTML document, place this bit of code:

CODE

<script type="text/javascript" language="Javascript" src="/js/jquery.js"></script>

The part where it says /js/jquery.js is where you'll put the URL or path to the jQuery .JS file you uploaded to your website.

Now, you're going to need to do a bit of code. Thankfully, though, it's easier and cleaner to do since we're using jQuery. What you want is the toggle() function of jQuery to get the showing and hiding effect. And while we're at it, we're going to give it a little smooth animation. Here's a basic idea of what you want:

CODE

<script type="text/javascript" language="Javascript">
$(document).ready(function() {
    // hides the content as soon as the DOM is ready
    // (a little sooner than page load)
    $('#content').hide();
        // toggles the content on clicking the noted link  
        $('a#toggle').click(function() {
            $('#content').toggle(400);
            return false;
        });
});
</script>

I added a few comments just to help explain the code a bit. A few things you need for this to work though are the ID's involved (or you could use classes, if you're more comfortable with that). By the way, the code above goes in between the <head></head> tags of your HTML document.

Okay, so, in the code you will notice two ID's (you can change these into classes if you'd like). The first one, #content, is where you'll place the content to be shown or hidden. A DIV would probably be a good container to place that content, so:

CODE

<div id="content">
Content to be shown/hidden is placed here.
</div>

Now, you will need a link or something of that sort to toggle the content on and off. In this case, we have an anchor link with an ID. Like so:

CODE

<a id="toggle" href="#">Toggle</a>

That will go before the DIV container where you placed the content to be shown/hidden.

That's basically it. Just save your page and try it out. Here's an example document just to show you the full code:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-gb" xml:lang="en-gb">
<head>
<script type="text/javascript" language="Javascript" src="/js/jquery.js"></script>
<script type="text/javascript" language="Javascript">
$(document).ready(function() {
// hides the content as soon as the DOM is ready
// (a little sooner than page load)
$('#content').hide();
// toggles the content on clicking the noted link
$('a#toggle').click(function() {
$('#content').toggle(400);
return false;
});
});
</script>
</head>
<body>
<a id="toggle" href="#">Toggle</a><br />
<div id="content">
Content will be toggled on and off (shown/hidden) with a smooth transition effect.
</div>
</body>
</html>

And here's a live example page you can take a look at. Afterward, all you really need to do is mess with your CSS to edit the content to your liking (height, width, position, etc.).

[fixtatik]

If you want to go the jQuery route, might I make a bit of a suggestion on Mike's code.

Instead of using IDs (as you'll probably not want to make a new bit of jQuery for each new section you want to hide), try it with classes. Something like this could do the trick nicely:

CODE

jQuery(function(){
    jQuery('a.show').click(function(){
        jQuery('a.show').not(jQuery(this)).next('div').hide('normal');
        jQuery(this).next('div').toggle('normal');
        return false
    }).next('div').hide()
})

CODE

<a class="toggle" href="#">Toggle</a>
<div>Anything in here will be toggled on clicking the preceding link</div>

<a class="toggle" href="#">Toggle</a>
<div>Anything in here will be toggled on clicking the preceding link</div>

<a class="toggle" href="#">Toggle</a>
<div>Anything in here will be toggled on clicking the preceding link</div>

It works like an accordion, so if you have a section open and click on a different toggle link, the already open section will be hidden as the current one is shown.

[Jamesisgsnap]

I went to the Website link you gave me, and it brought me to google website suggestions?
I mean, changed the url because it was www,jquery or w.e, instead of www. but it still didn't work?

[Mikeplyts]

Try clicking it again.

Or, click this.

[fixtatik]

Google has jQuery hosted on its developer API. Using that as a source instead of uploading a copy to your own server is pretty useful, because if someone goes to your site after visiting another that's using the cached version at Google, they'll already have it downloaded.

http://code.google.com/intl/fr/apis/ajaxli...ntation/#jquery

[Mickey]

Try this? Or choose from other methods here.