FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

More/Less code.

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


Dougie1
Well I really need a code like the you tube more/less code:



I hope you know what I mean and that you can help. I would be really grateful to anyone who can help. Very Happy
loophole64
This is done using javascript and CSS. The idea is to enclose some stuff in a span tag that has a display property of 'none'. Then when the more button is clicked, the display property is set to 'inline'. You also change the inner html of the anchor to switch between more and less at the same time.

Code:
<html>
<head>
    <style>
      span.more   {display: none;}
      a.more      {color: blue;}
    </style>
   
    <script type="text/javascript">

      function MoreOrLess(spanId)
      {
         var span = document.getElementById(spanId);
         var anchor = event.srcElement;
         
         if (span.style.display == 'none' || span.style.display == '')
         {
            span.style.display = 'inline';
            anchor.innerText = 'less';
         }
         else
         {
            span.style.display = 'none';
            anchor.innerText = 'more';
         }   
      }

    </script>
</head>

<body>

   Here is some text.
   <span class="more" id="moreText1">
      If you want to see this part, you have to click the more button.
   </span>
   (<a class="more" onclick="MoreOrLess('moreText1');">more</a>)

</body>
</html>


span is an inline level element, which is why it is made visible with inline here. If you were doing this with a block level element, like a div, table, or p, you would use display = 'block'.

For more information about inline elements, block level elements, and basic flow/layout with CSS, see http://css.maxdesign.com.au/floatutorial/definitions.htm.

Also, I think your sig is against the site TOS, so you might want to change it if you don't want to be given a hard time. I don't know how strictly those rules are enforced.
Agent ME
Rather than bother with display: inline/block and having to make different definitions for each, use visibility: visible/hidden instead.

I don't see anything wrong with his sig.
Dougie1
Hi AgentME it is a small world isn't it Surprised

This code only works in internet explorer. Is there any way to sort that to get it to work in firefox also?
MrBlueSky
Dougie1 wrote:
Hi AgentME it is a small world isn't it Surprised

This code only works in internet explorer. Is there any way to sort that to get it to work in firefox also?


Code:

<html>
<head>
    <style>
      span.more   {display: none;}
      a.more      {color: blue;}
    </style>
   
    <script type="text/javascript">

      function moreOrLess(spanId, anchor)
      {
         var span = document.getElementById(spanId);
         
         if (span.style.display == 'none' || span.style.display == '')
         {
            span.style.display = 'inline';
            anchor.innerHTML = 'less';
         }
         else
         {
            span.style.display = 'none';
            anchor.innerHTML = 'more';
         }   
      }

    </script>
</head>

<body>

   Here is some text.
   <span style="display: none" class="more" id="moreText1">
      If you want to see this part, you have to click the more button.
   </span>
   (<a class="more" id='link1' onclick="moreOrLess('moreText1', this);">more</a>)

</body>
</html>
loophole64
Good call MrBlueSky.

Agent ME wrote:
Rather than bother with display: inline/block and having to make different definitions for each, use visibility: visible/hidden instead.

I don't see anything wrong with his sig.


I'm afraid that wouldn't accomplish the same thing Agent. Setting the visibility property to hidden will hide the text, but it will still take up the same amount of space in the layout that it does when it is visible. This leaves undesirable white space. Using display: none removes the text from the layout completely, so that when it is shown, it has the effect of pushing down other content below it.
Dougie1
Right I have experimented a bit and come up with this code:

here.

I was wondering which is better. Using the div tags like in that or the way you showed me. Also How would I get it so that once the "Expand" bit has been clicked it goes away in my version?

Thanks.
loophole64
Do it any way you like. We gave you a fairly comprehensive function there. Don't use document.all(). Use Document.getElementById().

Put the extend text inside a span and hide it like you would a div.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.