Tutorial 3 - Substituting content

At the top of the first tutorial page there's a box that starts to describe CSS:

When you click the "more" link (on the other page; the above is just a screenshot) the box expands into a paragraph of text, with a "less" link at the end. Clicking this restores the box to its previous size. It's a technique that can make a page much easier to read, by hiding parts of it that will only be of interest to certain readers.

This tutorial explains how this is done.

We start by creating the two forms of the text:

<div id="tutorial-default" class="ec-popout">CSS is Cascading Style Sheets. These are external markup files... <a id="tutorial-more" href="#">more</a></div>

<div id="tutorial-replace" class="ec-popout">CSS is Cascading Style Sheets. These are external markup files that work alongside your HTML, providing style information to add to the content provided by the HTML. By keeping the two separate we make it easier to change the appearance of a page or of several pages without the need to edit the page text itself. The page text then becomes easier to work with as it isn't full of style information. <a id="tutorial-less" href="#">less</a></div>

The two versions of the text each have their own div with a unique id. They also share a CSS class that defines the border, padding and background color used to display the text. I'll leave you to add some suitable CSS, but if you don't it will work just as well. At the end of each text is a hyperlinked "more" or "less" with no URL, just a '#'. These also have unique ids.

Now we add our EasyCoder script:

<div id="easycoder-script">
  div Replace
  a More
  a Less

  attach Default to `tutorial-default`
  attach Replace to `tutorial-replace`
  attach More to `tutorial-more`
  attach Less to `tutorial-less`

SetupDefault:
  set style `display` of Default to `block`
  set style `display` of Replace to `none`
  on click More go to SetupReplace
  stop

SetupReplace:
  set style `display` of Replace to `block`
  set style `display` of Default to `none`
  on click Less go to SetupDefault
  stop
</div>

The script has 2 div variables, one for each of the alternative text versions, and 2 a variables for the hyperlinked "more" and "less". The script attaches the div variables to the default and replacement texts and the a variables to the more and less links.

The next line, SetupDefault:, is a program label, marking a specific line of the script.

The next 2 lines make the default text visible and the replacement invisible.

Now we arrange that when the more variable is clicked the program carries on at the named label.

The stop that follows is important; we don't want the code at SetupReplace to run until more is clicked.

The rest of the code does the same thing but with the second text block and its less link.

Add the 2 blocks of code to a blank page (in Text mode, remember!) and view it. The text should expand and contract as you click the links.

CSS is Cascading Style Sheets. These are external markup files... more
CSS is Cascading Style Sheets. These are external markup files that work alongside your HTML, providing style information to add to the content provided by the HTML. By keeping the two separate we make it easier to change the appearance of a page or of several pages without the need to edit the page text itself. The page text then becomes easier to work with as it isn't full of style information. less

 

That's the end of our short introductory tutorial. If you'd like to go further, see the EasyCoder Codex.

!
  img DuckThink
  if mobile
  begin
    attach DuckThink to `ec-duckthink`
    set style `display` of DuckThink to `none`
  end

  div Default
  div Replace
  a More
  a Less

  attach Default to `tutorial-default`
  attach Replace to `tutorial-replace`
  attach More to `tutorial-more`
  attach Less to `tutorial-less`

SetupDefault:
  set style `display` of Default to `block`
  set style `display` of Replace to `none`
  on click More go to SetupReplace
  stop

SetupReplace:
  set style `display` of Replace to `block`
  set style `display` of Default to `none`
  on click Less go to SetupDefault
  stop