Results 1 to 4 of 4

Thread: Show and Hide layer on click OK but How to change the labels as well?

  1. #1
    Join Date
    Jan 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Show and Hide layer on click OK but How to change the labels as well?

    Hi Guys.

    I have implemented a simple show/hide layer script on my website. This is what I've got:

    Code:
    <script language="javascript">
    var show_layer = true;
    function showLayer(){
    var divlayer = document.getElementById('divlayer');
    divlayer.style.display = show_layer?'':'none';
    show_layer = !show_layer;
    }
    </script>
    And the code used to call it:

    Code:
    <a href="javascript:showLayer()" class="readmore"><img src="img/more.gif" border="0" /></a><a href="javascript:showLayer()" class="readmore">Read More</a>

    Now, the script works just fine - No problems there.

    But I would also like to change the text and the image at the button link to some things else so that users know that they have already clicked on that.

    For example: From "Read More" --> "Hide this" (and then goes back to Read More after have clicked on it)

    As well as the image"more.gif changes to "hide.gif".

    (I hope this make some sense '- -)

    I can't figure out where to add that to my code. Any help would be greatly appreciated!!!

    Thanks

  2. #2
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    If you'll change your code to:
    Code:
    <a href="#" class="readmore">
    <img src="img/more.gif" border="0" id="image" onClick="showImage();return false"/></a>
    <a href="#" class="readmore" onClick="read();return false" id="readarea">Read More</a>
    and add this in your javascript:
    Code:
    function showImage()
    {
    document.getElementById('image').src = 'hide.gif';
    }
    function read()
    {
    document.getElementById('readarea').innerHTML = 'Hide this';
    }
    See if it helps
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

  3. #3
    Join Date
    Jan 2007
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi rangana!

    Thank you!

    I have tried it but it does not work still.
    I see that you removed href="javascript:showLayer()" part. But that is the most important for the whole thing.

    Now I have tried it like this"

    Code:
    <a href="javascript:showLayer()" class="readmore">
    <img src="img/more.gif" border="0" id="image" onClick="showImage();return false"/></a>
    <a href="javascript:showLayer()" class="readmore" onClick="read();return false" id="readarea">Read More</a>
    And function showImage() and read() work but ShowLayer() does not work

    How to combine them??

  4. #4
    Join Date
    Feb 2008
    Location
    Cebu City Philippines
    Posts
    1,160
    Thanks
    17
    Thanked 277 Times in 275 Posts

    Default

    I don't understand it..What's in the showLayer() function.
    Logically, it will not work, because it's in the <a> tag and we still have the onClick function in the image.

    If you'll change the code to:
    Code:
    <a href="javascript:showLayer()" class="readmore">
    <img src="img/more.gif" border="0" id="image">
    </a>
    <a href="javascript:showLayer()" class="readmore" onClick="read();return false" id="readarea">Read More
    </a>
    the showLayer() function will work.

    If you want the both to work, then put them in the same function, could either be in the showLayer or showImage.
    Learn how to code at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •