SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool onclick function for closing a collapsible section

    Hi There

    I have a collapsible section in my webpage which when the link is clicked an image appears. Then if you click the link again the image disappears. This is all working fine, but my client now wants the image to disappear if it is clicked i.e the same as if the text link had been clicked. I presume I would need some form of onclick function, but this is where I get a bit stuck. Could anyone help me on this and have to go about write the code to do this?

    Here is my current javascript code and HTML code.

    ------------------------------------------------------
    function dsp(loc){
    if(document.getElementById){
    var foc=loc.firstChild;
    foc=loc.firstChild.innerHTML?
    loc.firstChild:
    loc.firstChild.nextSibling;
    foc.innerHTML=foc.innerHTML=='+'?'-':'+';
    foc=loc.parentNode.nextSibling.style?
    loc.parentNode.nextSibling:
    loc.parentNode.nextSibling.nextSibling;
    foc.style.display=foc.style.display=='block'?'none':'block';}}

    if(!document.getElementById)
    document.write('<style type="text/css"><!--\n'+
    '.dspcont{display:block;}\n'+
    '//--></style>');



    <h1><a class="dsphead" onclick="dsp(this)" href="javascript:void(0)"><strong>+</strong> click here for more info &gt;&gt;</a></h1>

    <div class="dspcont"><img alt="" src="/public/images/test.jpg" border="0"></div>

    text to go here......

    ------------------------------------------------------

    Many Thanks in advance

  2. #2
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    why dont you just use a simple toggle function
    Code:
    //js
    function toggleImage() {
        var img = document.getElementById('yourImage');
        img.style.display = img.style.display == 'none' ? 'inline' : 'none';
    }
    
    //markup
    <img id='yourImage' alt='' onclick='toggleImage();' />
    <a href='javascript:void(0);' onclick='toggleImage();'>Blah...</a>

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    Hi There

    Thanks for the reply, but I have tried to get your suggestion working and can't for some reason. I must be doing something wrong as at the moment the image displays all the time even when I try to click on it to disappear. The text link also doesn't make the image dissappear, so at the moment nothing is happening. My code is below, can anyone see where I am going wrong?

    many thanks in advance.

    //Javascript
    -------------------------------------------
    function toggleImage()
    {
    var img = document.getElementById('yourImage');
    img.style.display = img.style.display == 'none' ? 'inline' : 'none';
    }

    //HTML Page
    -------------------------------------------
    <a onclick="toggleImage();" href="javascript:void(0);">click here for more info &gt;&gt;</a>

    <img id="yourImage" onclick="toggleImage();" alt="" src="/public/images/test1.jpg" border="0">

  4. #4
    SitePoint Member
    Join Date
    Jul 2006
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could replace the source with a transparent image so it looks like it disappears when it doesn't. it might help.

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    I understand the principle, but not too sure how I would code this i.e would the JS code need to change somehow or would I make a change to the HTML page itself?

    Basically the text link needs to display/hide the image and like wise the image (when clicked) needs to either display/hide.

    many thanks

  6. #6
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you getting an error message with the above toggleImage() code?
    That should work fine, and in fact I just tested it on a sample page and it works for me

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2005
    Location
    London
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cool

    there is no actual error, but nothing happens i.e if I click the text link nothing happens and likewise with the image itself? Are you using the exact code as above? any ideas?

    many thanks

  8. #8
    SitePoint Evangelist
    Join Date
    Jan 2005
    Posts
    502
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes I was.
    Can you give us a url to see this page?


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
  •