Click on a hyperlink to open text

Discussion in 'HTML' started by Steve Novak, Oct 20, 2011.

  1. Steve Novak

    Steve Novak Guest

    In the following site
    http://support.apple.com/kb/ht1574
    There is a hyperlink with the text " How to redeem an iTunes Gift Card
    on a computer"
    When you click on it, it reveals some more text which disappears on
    the next click.
    I inspected the code to figure out how this is done but was unable to
    isolate the required code.
    Can someone pleas post a simple example of the code to achieve this
    effect.
    Steve Novak, Oct 20, 2011
    #1
    1. Advertising

  2. 20.10.2011 10:17, Steve Novak wrote:

    > In the following site
    > http://support.apple.com/kb/ht1574
    > There is a hyperlink with the text " How to redeem an iTunes Gift Card
    > on a computer"


    It looks like a link, but it's not a real link, in the full meaning of
    the word. Disable JavaScript in your browser and try again to see that
    the "link" does not work.

    > When you click on it, it reveals some more text which disappears on
    > the next click.
    > I inspected the code to figure out how this is done but was unable to
    > isolate the required code.


    It's rather simple though slightly obfuscated by various complexities.
    The text revealed is part of the document's content, just placed in an
    element that is hidden with CSS (display: none is one simple way of
    hiding, and it's what the page uses). When you click on the "link", then
    (if JavaScript is enabled), the CSS settings for the element are changed
    and it becomes visible. Clicking it again changes the status back.

    A fundamental design flaw with this is that when CSS is enabled and
    JavaScript is not, the information is not available at all to the user.

    A more robust way would be something like this:

    <div class=stuff>
    <h2>How to do something</h2>
    <div class=howto>
    This is how to do it, in detail.
    </div>
    </div>

    Works fine, doesn't it? If you want to hide the detailed explanation
    initially and make it available only via clicking on the heading
    (assuming the user realizes he needs to do that! you might wish to style
    the heading in a link-like manner for that), you should ensure that
    hiding only takes place when revealing is possible.

    This means that you would add some relatively simple JavaScript code
    that traverses the document, recognizes elements that have class=stuff,
    assigns an onclick handler to the h2 element inside any such element and
    sets the display property of any element with class=howto to 'none'. The
    onclick event handler would then just toggle that display property value
    between 'none' and 'block'.

    It's not that complicated, and I would say that if you don't know how to
    do that (and don't want to learn that), you shouldn't do it - just
    copying such code without understanding how it works tends to hurt,
    sooner or later.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Oct 20, 2011
    #2
    1. Advertising

  3. Steve Novak

    dorayme Guest

    In article <j7ojor$mqo$>,
    "Jukka K. Korpela" <> wrote:

    > 20.10.2011 10:17, Steve Novak wrote:
    >
    > > In the following site
    > > http://support.apple.com/kb/ht1574

    ....
    >
    > A fundamental design flaw with this is that when CSS is enabled and
    > JavaScript is not, the information is not available at all to the user.


    It is to me on my Mac on FF or Safari with JS disabled, the info
    simply appears in full. The JS only enables a hiding, its absence
    does not make it compulsory.

    --
    dorayme
    dorayme, Oct 20, 2011
    #3
  4. 20.10.2011 12:23, dorayme wrote:

    > In article<j7ojor$mqo$>,
    > "Jukka K. Korpela"<> wrote:
    >
    >> 20.10.2011 10:17, Steve Novak wrote:
    >>
    >>> In the following site
    >>> http://support.apple.com/kb/ht1574

    > ...
    >>
    >> A fundamental design flaw with this is that when CSS is enabled and
    >> JavaScript is not, the information is not available at all to the user.

    >
    > It is to me on my Mac on FF or Safari with JS disabled, the info
    > simply appears in full. The JS only enables a hiding, its absence
    > does not make it compulsory.


    Standing corrected, I realize that I had right-clicked and selected
    "Inspect Element" (a Firebug feature), which showed me

    <blockquote style="display: block;">

    and I failed to remember that it shows me the document's current status,
    not the original HTML source. That is, display: block had been added
    with JavaScript.

    So it works just as you say. I wouldn't copy the code though - it's far
    too complex for simple use, and the basic idea can be implemented much
    simpler (with a few-liner if you use jQuery).

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Oct 20, 2011
    #4
  5. Jukka K. Korpela wrote:
    > (with a few-liner if you use jQuery).


    Yeah, but you have to load this lumbering mess of a library for a rather
    simple roll-your-own handful for JavaScript functions...

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Oct 20, 2011
    #5
  6. Steve Novak

    Steve Novak Guest

    On Oct 20, 3:48 am, "Jukka K. Korpela" <> wrote:
    > A fundamental design flaw with this is that when CSS is enabled and
    > JavaScript is not, the information is not available at all to the user.
    >
    > A more robust way would be something like this:
    >
    > <div class=stuff>
    > <h2>How to do something</h2>
    > <div class=howto>
    > This is how to do it, in detail.
    > </div>
    > </div>
    >
    > Works fine, doesn't it?


    I copied your sample code and it does not work.
    I don't mind if in order to achieve this effect there is a need for
    CSS or JavaScript. All I'm after is a simple example of working code.
    Steve Novak, Oct 21, 2011
    #6
  7. Steve Novak

    dorayme Guest

    In article
    <
    m>,
    Steve Novak <> wrote:

    > On Oct 20, 3:48 am, "Jukka K. Korpela" <> wrote:
    > > A fundamental design flaw with this is that when CSS is enabled and
    > > JavaScript is not, the information is not available at all to the user.
    > >
    > > A more robust way would be something like this:
    > >
    > > <div class=stuff>
    > > <h2>How to do something</h2>
    > > <div class=howto>
    > > This is how to do it, in detail.
    > > </div>
    > > </div>
    > >
    > > Works fine, doesn't it?

    >
    > I copied your sample code and it does not work.


    It works to give the information without any tricks, that I think
    is the point. Tricks to be truly admired are the ones by
    accomplished magicians.

    Still, I digress. Here is one rudimentary way that can be
    enhanced all sorts of ways:

    body {
    margin: 1em 2em 1em 2em;
    max-width: 40em;
    }
    h1 {font-size: 1.3em; }
    p.example {
    width: 40em;
    }
    ..one:hover:after {
    content: "Cras vel eros. Vivamus sed odio et orci tincidunt
    ornare. Duis dui lectus, commodo ut, gravida id, ultricies quis,
    tellus. Vestibulum blandit nibh eget turpis. Quisque mollis,
    lacus consectetur eleifend convallis, diam augue blandit magna.
    Cras vel eros. Vivamus sed odio et orci tincidunt ornare. Duis
    dui lectus, commodo ut, gravida id, ultricies quis, tellus.
    Vestibulum blandit nibh eget turpis. Quisque mollis, lacus
    consectetur eleifend convallis, diam augue blandit magna. Cras
    vel eros. Vivamus sed odio et orci tincidunt ornare. Duis dui
    lectus, commodo ut, gravida id, ultricies quis, tellus.
    Vestibulum blandit nibh eget turpis. Quisque mollis, lacus
    consectetur eleifend convallis, diam augue blandit magna.";
    color: #00c;
    background: #fff;
    }
    div span {color: #c00; background: white;}

    with

    <p class="example one">On hover, extra text should appear.<br></p>

    --
    dorayme
    dorayme, Oct 21, 2011
    #7
  8. Steve Novak

    Steve Novak Guest

    Steve Novak, Oct 21, 2011
    #8
  9. 21.10.2011 14:07, Steve Novak wrote:

    > ok, I found some simple code that does it:
    > http://www.randomsnippets.com/2008/02/12/how-to-hide-and-show-your-div/


    Anyone who uses it probably deserves what he gets, so how about first
    doing even the elementary test (which the page author should have
    conducted) of switching off images in your browser and then seeing how
    the page "works".

    To repeat myself: This is the kind of things you shouldn't do if you
    don't know how to code it yourself - properly. (If you do know it, you
    can of course look at other people's code to get some ideas about
    details and enhancements.)

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Oct 21, 2011
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Marshal Antony
    Replies:
    2
    Views:
    1,070
    Amir Eshterayeh
    Feb 27, 2004
  2. sohan
    Replies:
    3
    Views:
    15,827
    sohan
    Mar 2, 2006
  3. Amy
    Replies:
    0
    Views:
    954
  4. davetichenor
    Replies:
    1
    Views:
    803
    Eliyahu Goldin
    Oct 30, 2006
  5. Marshal Antony

    open page externally when click on hyperlink inside datagrid

    Marshal Antony, Feb 26, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    156
    Amir Eshterayeh
    Feb 26, 2004
Loading...

Share This Page