Using radio buttons to change text

  • I have two linked radio buttons on a web page defined thus:

        <input type="radio" id="id0" name="mydir" >Travelling north
    <input type="radio" id="id1" name="mydir" >Travelling south

    Elsewhere on the page I have text describing what can bee seen while travelling, such as:
    “On the right you can see the old town hall”
    This is written as if the user is travelling north.

    I want to use the radio buttons to change the word “right” to “left” so that when the user is travelling south and selects button id1, the text reads
    “On the left you can see the old town hall”

    I am fairly new to customising wordpress, and I can’t find any documentation on this (not that is simple enough for me to understand, anyway!) Can anyone tell me how to do it or suggest a good tutorial.

    Journeyman

    • This topic was modified 5 years, 10 months ago by Jan Dembowski.
    • This topic was modified 5 years, 10 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic
Viewing 1 replies (of 1 total)

  • This article shows how to do it with CSS only.
    https://css-tricks.com/exposing-form-fields-radio-button-css/

    Note that it says “The div we’re going to reveal has to be after it, and a sibling element (within the same parent)”.
    You would need to write your “north” parts with one class and your “south” parts with another class, and use the CSS to hide one and show the other.

    An alternative is to load a script to change a class when the choice is changed. I prefer fewer scripts, so would just use CSS.

Viewing 1 replies (of 1 total)
  • The topic ‘Using radio buttons to change text’ is closed to new replies.