Hide/show text (jn that order)

[Mithos]

Hi

Some of my web pages have quite a bulk of content, for examples "interviews" etc and it takes a long time to scroll around trying to find what you want. So I was looking for a way to (on page load) to hide the text (it must be hidden onload), and then hit a "link" to display the hidden content.

Best example I can give is Youtube (Which is what I'm aiming for). On many vidoes there is a brief summary of 10 or so words and then a "More" link, which when you hit it shows (you guessed it) the rest of the text.

I've tried learning from the youtube page source, but lets just say to a newbie like me... after an hour of trying to understand whats going on, I've given up.

I've worked out its a Javascript function, and I think I will need some type of DIV Id, in order to seperate interview's. Any advice or help would be much appreciated.

[AlienDev]

I have only ever used JS once in my life but I think its something like this:

HTML:

<div class="hide" style="display:none;" onClick="show();">this is hidden at the start</div>

JS:

function show() {
document.div.hide.display="normal";
}

Someone who knows JS will be able to help you better than me.

[Mithos]

I have only ever used JS once in my life but I think its something like this:

HTML:

<div class="hide" style="display:none;" onClick="show();">this is hidden at the start</div>

JS:

function show() {
document.div.hide.display="normal";
}

Someone who knows JS will be able to help you better than me.

Thanks, but the code is incomplete There is nothing to "Click" to bring it into view to start with, and unsure how I could apply this to mutipity DIV id's....

[Raffles]

If you have make JS hide most of the content onload, the user will see the full content while the page is loading and when the last image has been downloaded (usually the slowest things on a page), then the onload event fires and all the JS magic is done.

YouTube do it like this:

<div id="vidDescDiv">
  <span id="vidDescBegin">Dan tries to run up the longest escal...</span>
  <span id="vidDescRemain">Dan tries to run up the longest escalator in Western Europe the wrong way twice.</span>
  <span id="vidDescMore" class="smallText"> (<a href="#" class="eLink" onclick="showInline('vidDescRemain'); hideInline('vidDescMore'); hideInline('vidDescBegin'); showInline('vidDescLess'); return false;" rel="nofollow">more</a>)</span>
  <span id="vidDescLess" class="smallText">(<a href="#" class="eLink" onclick="hideInline('vidDescRemain'); hideInline('vidDescLess'); showInline('vidDescBegin'); showInline('vidDescMore'); return false;" rel="nofollow">less</a>)</span>
</div>

All they're doing is swapping display:none between two spans and two other spans (the content and the less/more links). It's probably the simplest way. You would have to truncate the text on the server side and add the ellipsis at the end of it.

You could reduce the extra markup by making the content have overflow:hidden and a short height and then set the height to auto when the link is clicked (and change the link text to 'less'). You would have to work with ems there to make sure the height is always, say, three lines high when minimised:

<div class="interview">
  <p>This is a long interview. This is a long interview. This is a long interview.</p>
  <p>This is a long interview. This is a long interview. This is a long interview.</p>
  <p>This is a long interview. This is a long interview. This is a long interview.</p>
  <p>This is a long interview. This is a long interview. This is a long interview.</p>
  <p>This is a long interview. This is a long interview. This is a long interview.</p>
  <span class="moreorless">... <a href="#">(more)</a></span>
</div>

.interview {
  line-height:1.5em;
  height:4.5em;
  overflow:hidden;
  position:relative;
}
.interview .moreorless {
  position:absolute;
  right:0;
  bottom:0;
  background:#FFF;
}

If the third line happens to be where a paragraph finishes, that's OK, but if it's in the middle of a paragraph, then the span will cover some of it with the ellipsis and the (more) link. You have to decide if that looks OK.

Then with javascript you have to find all the spans with the "moreorless" class and put them in an array. Then loop through them and attach an onclick event to the anchor inside each one that sets the parent div's (the .interview) height to auto and the link itself's text to less. Best way to do this would be by attaching another class to it and then removing it when it's clicked again.

[Mithos]

Ooh thanks Raffles, that looks really good.


Just a bit confuddled by;

 <span class="moreorless">... <a href="#">(more)</a></span>

What anchor needs to be put in place of "#" to open the rest of the content ???


Also, um does your code need a J script to work???

[Raffles]

You can leave the anchor as it is and you have to of course target it via javascript. What you need javascript for I outlined in the last paragraph of my previous post.

[SimplyFu]

creating javascript tabs, it will be a lot of easier if you use prototype framework

eg.

<div id="vidDescDiv">
  <span id="vidDescBegin">a </span>
  <span id="vidDescRemain">b </span>
  <span id="vidDescMore" class="smallText">c </span>
  <span id="vidDescLess" class="smallText">d </span>
</div>

<div id="vidDescDivContent">
  <span id="vidDescBegin-content">Content 1</span>
  <span id="vidDescRemain-content">Content 2</span>
  <span id="vidDescMore-content" class="smallText">Content 3</span>
  <span id="vidDescLess-content" class="smallText">Content 4</span>
</div>

<script>
	links = $A($('vidDescDiv').getElementsByTagName('SPAN'))
	contents = $A($('vidDescDivContent').getElementsByTagName('SPAN'))
	links.each(function (t) {
		t.onclick = function () {
			contents.each(function (tc) { if (tc.id != t.id+'-content') Element.hide(tc); });
			$(t.id+'-content').show();
		}
	});
</script>