Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hiding / Showing Partial Content With a Click 1

Status
Not open for further replies.
davidku

davidku

Programmer
Aug 6, 2002
24
MY
Hello Gurus,

My understanding of Javascript still not good enough to modify this script. I would like to seek your help whether you have a better script to perform this function.

Let's say, I have an article. I am breaking the article into 2 sections. By default, the first section will be shown and the second section will be hidden. When user click on the link, section 2 will be expanded.

I found a script at :

but the codings seems too lengthy and I just want the hidden section to be expanded at the bottom of Section 1 instead of replacing it.

Any help will be greatly appreciated. Thanks.
 
Sort by date Sort by votes
You're right - you probably don't need a load of code. All you need to do is something like this:

Code: 
<div>
   Section 1 text here

   <a href="javascript:document.getElementById('section2').style.display = 'block';">Show section 2</a>
</div>

<div id="section2" style="display:none;">
   Section 2 text here
</div>

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I think something wrong with the code. It manages to hide it but when I click on the link, it shows me a blank page with a word "block".

Is the syntax wrong ? Thanks.
 
Upvote 0 Downvote
Great ! It works .....

What if I click on it again and then hide it ? and maybe I will just change the text to "Hide Section 2" ?

Dan, do you have Paypal ? I would like to buy you a drink for offering me a great solution. I am still new in Javascript and you really help me. Thanks.
 
Upvote 0 Downvote
Here's one way of giving it a "toggle" behvaiour:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="content-language" content="en">
	<title>Test page</title>

	<style type="text/css">
	</style>

	<script type="text/javascript">
	<!--

		function toggleSection(sectionId, textWhenHidden, textWhenShown) {
			var section = document.getElementById(sectionId);
			if (section.style.display == 'none') {
				section.style.display = 'block';
				document.getElementById('section1ToggleLink').innerHTML = textWhenShown;
			} else {
				section.style.display = 'none';
				document.getElementById('section1ToggleLink').innerHTML = textWhenHidden;
			}
		}

	//-->
	</script>
</head>

<body>
<div>
	Section 1 text here
	<a id="section1ToggleLink" href="javascript:void(0);" onclick="toggleSection('section2', 'Show section 2', 'Hide section 2'); return(false);">Show section 2</a>
</div>

<div id="section2" style="display:none;">
	Section 2 text here
</div>
</body>
</html>

I do have a paypal account, and with summer coming up, will be spending plenty of time drinking fine beer... and it would be rude to refuse such a fine offer. Details are on the page of a piece of freeware software I haven't updated in far too long:


[cheers]

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hello again,

If I am not allow to use this section :

<div id="section2" style="display:none;">
Section 2 text here
</div>

Any other way I can hide the script ? My friend said that if I use display:none, search engine can ban my website for hiding the text.

Do you have other workaround ? Thanks.
 
Upvote 0 Downvote
My friend said that if I use display:none, search engine can ban my website for hiding the text.
Click to expand...
Never heard of that one before. Anyways, the only other way would be to use visibility: hidden. The problem with this method is that the hidden element/block will continue to occupy the same space even though it is not visible.

Here's an example:
Code: 
<script type="text/javascript">
<!--//
function makeVisible(id) {
	document.getElementById(id).style.visibility = "visible";
}
//-->
</script>

<div id="section2" style="[i]visibility:hidden[/i]">
    Section 2 text here
</div>

<br>

<a href="#" onClick="makeVisible('section2')">Click to View</a>

M. Brooks
 
Upvote 0 Downvote
If I can find the word "hidden" or display:none in my web page, it could bring up some alert to the search engine and possibly ban my website.

I am thinking to call a Javascript function in the body load to hide it.

OR I will use CSS layer to hide it first by putting it behind or make the section smaller.

Do you think the code is do-able ?
 
Upvote 0 Downvote
I'd ignore your friend.

SEs might ban you if you hide text designed specifically to list keywords, etc, on your site, that aren't really legitimate content, e.g.:

Code: 
<div id="section2" style="display:none;">
   cars, trucks, bikes, we've got the lot, london, more cars, etc
</div>

But if the div contains real content, you've nothig to worry about.

Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Thanks for clarification.

On another issue, I try to use this tool to encrypt the code :


BUT I can't get it work when I call this function as external file. A lot of errors reported.

Could it due to <script type="text/javascript"> ??

Code: 
<script type="text/javascript">
    <!--

        function toggleSection(sectionId, textWhenHidden, textWhenShown) {
            var section = document.getElementById(sectionId);
            if (section.style.display == 'none') {
                section.style.display = 'block';
                document.getElementById('section1ToggleLink').innerHTML = textWhenShown;
            } else {
                section.style.display = 'none';
                document.getElementById('section1ToggleLink').innerHTML = textWhenHidden;
            }
        }

    //-->
    </script>

If you have any idea, please let me know. Thanks.
 
Upvote 0 Downvote
I wouldn't waste time with trying to obfuscate or encrypt your code. Anything that is delivered to the browser ultimately has to be unencryptable (otherwise the browser would never be able to display it) - and therefore, can always be unencrypted by users.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
279
coldbohemia
coldbohemia
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
699
Mike Lewis
Mike Lewis
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
314
malpa
malpa
TheLazyPig
  • Locked
  • Question
Disable radio button after edit button click
Replies
1
Views
108
xwb
xwb
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
221
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top