How can I create an element that flips between two values on click?

Question

Given two spans like this:

<span>Click for info</span>
<span style="display: none">Here is a big long string of info blah blah</span>

...I'd like to have an onclick function attached to each so that the visitor sees "Click for info", and then when they click it, the first span is hidden and the second is unhidden. And, of course, when the second is clicked, things go back to the way they were originally.

I don't have a way of easily generating unique IDs, so I'd prefer to avoid the getElementByID() route, and I'd rather not use jQuery or any other heavyweight dependency. Is there an elegant way to do this?

The best idea I have so far is to write a toggleAllSiblings() function, set onclick to that function for both elements in the pair, and then wrap each pair in a parent element.

Can it be done without the parent node?

Answer 1

I'm not sure of the implementation, but the logic will look similiar to

• Get all spans
• Hide adjacent spans beneath (leave them visible for non JS users by default)
• Attach even handler to first spans
• Event handler function - show next span if next span invisible, otherwise hide it

Answer 2

This is off the top of my head & untested. It should get you going at least.

<script>
function toggle(id)
{
var display = document.getElementById(id).style.display;
if ( display == "block" )
document.getElementById(id).style.display = "none";
else
document.getElementById(id).style.display = "block";
}
</script>

<span onclick="javascript: toggle('span_to_toggle');" id="clickable_span">click here</span>

<span id='span_to_toggle' style="diplay:none">foooooooooooooooooooooo</span>

Answer 3

I'd rather not use jQuery or any other heavyweight dependency.

I don't know if that is a good approach. Unless you can attribute any real performance problem to using jQuery or prototype.js (which are both not really that heavy), you should use them.

Otherwise you will just spend a lot of time with repetitive typing and on fixing nasty browser bugs and incompatibilites.

I don't have a way of easily generating unique IDs

Again, you really want $$('div span［someParam=something］'）. And since the libraries dispatch this to native browser query functions where available, it is probably not even slower than a hand-coded solution. Definitely more maintainable.

Answer 4

quick rework of @Jason:

<script>
function toggle(targetId, sender)
{
var show = document.getElementById(targetId);

show.style.display = "block";
sender.style.display = "none";
}
</script>

<span onclick="javascript: toggle('more', this);" id="less">click         here</span>

<span style="display:none;" id="more" onclick="javascript: toggle('less', this);" >foooooooooooooooooooooo</span>

Answer 5

If you really want to go without ids you could do something like this:

<script>
function togglePrevious(sender) {
    sender.previousSibling.style.display = "inline";
    sender.style.display = "none";
}
function toggleNext(sender) {
    sender.nextSibling.style.display = "inline";
    sender.style.display = "none";
}
</script>
<span onclick="javascript:toggleNext(this);">Click for info</span>
<span onclick="javascript:togglePrevious(this);" style="display:none">Info blablabla</span>

And please not that you should really use "inline" instead of "block" if you are using spans as they are inline elements. Setting their display style to block will force them to be divs.

Answer 6

Yet another version, a la progressive enhancement — will properly show the full info when JavaScript is off.

<span class="details">Here is a big long string of info blah blah</span>

<script type="text/javascript">
    // Open/close span behaviour
    //
    function infoToggle(span) {
        var ersatz= document.createElement('span');
        ersatz.appendChild(document.createTextNode('Click for info...'));
        span.parentNode.insertBefore(ersatz, span);
        span.style.display= 'none';

        span.onclick= function() {
            ersatz.style.display= 'inline';
            span.style.display= 'none';
        };
        ersatz.onclick= function() {
            ersatz.style.display= 'none';
            span.style.display= 'inline';
        };
    }

    // Bind to all spans with class="details"
    //
    var spans= document.getElementsByTagName('span');
    for (var i= spans.length; i-->0;)
        if (spans[i].className=='details')
            infoToggle(spans[i]);
</script>

Answer 7

Just as a side note for when you're developing javascript stuff which involves creating elements in the DOM. If you're not going to use something like jQuery (I'm not a fan of frameworks, too heavy and non-specific) try and use a function to make your elements for you, that way you don't have too many redundant lines as it tends to make your scripts really heavy.

I personally use a code snippet i found here www.dev-explorer.com/articles/create-dom-object but you might find something that suits you better. If your site downloads quicker the user doesn't have to wait as long for onload events etc and generally doesn't get annoyed as easily.

Hope this made sense Thanks, Scarlet