SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot barleytwist's Avatar
    Join Date
    Dec 2005
    Location
    Lulworth, Dorset, UK
    Posts
    183
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Read more . . script needed

    I need an accessible "read more" script which when clicked opens the 2nd and subsequent paras. I would prefer not to have a page refresh but the paras just unfold. I want to keep the hidden text in the html page (not in the js file).

    I use dreamweaver 8 and want to apply this code in several places on the website.

    Thanks for your time.

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    For it to be accessible, this means that if javascript isn't available, the whole text should be shown. The problem with this is that the page will have to load and then javascript should hide the extra text. This normally will result in a flicker, showing the extra text for a little while until the rest of the page has finished loading.

    There is a CSS-only method but it has a few problems with it, mentioned on that page. Also, it doesn't use semantic HTML for it and (at least in Firefox) the mouse cursor over the extra text is the pointer and not the text selector.

    Ideally, this is the perfect case to use the CSS3 target pseudo-class but it's not so useful since browser support for it is limited to Mozilla and Safari. You could use if for browsers that support it and javascript for those that don't, but this would be tricky to implement reliably (browser detection is a no-no).

    So, er, back to the topic at hand, give your paragraphs to be initially hidden a class, e.g. "foldable". Then find them on the page, below by using a getElementsByClassName function like this one. Then do this sort of thing:
    Code Javascript:
    window.onload = function() {
      var foldables = getElementsByClass('foldable');
      for (var i = 0; i < foldables.length; i++) {
        foldables[i].style.display = 'none'; // hide them onload
      }
      var readmore = document.getElementById('readmore'); // 'read more' link
      readmore.onclick = function() {
        for (var i = 0; i < foldables.length; i++) {
          foldables[i].style.display = 'block';
        }
      }
    }
    Then just put that in an external JS file and place it at the top of every page you want to add this functionality to.

    If the flicker is unacceptable, you can use DOMContentLoaded and its similar friends.


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
  •