1

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?

7 Answers 7

3

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.

3
  • +1 for .previousSibling / nextSibling ... @Jason: inline or block - it's up to @Mike to decide :)
    – roman m
    Feb 27, 2009 at 7:12
  • No need for “javascript:” prefix on on* handlers, they're not URLs. Also note that nextSibling/previousSibling will only work if there is no text (including whitespace) between the two spans.
    – bobince
    Feb 27, 2009 at 13:30
  • Oh, this is definitely an inline case. If I wanted block, I'd be using divs instead of spans.
    – mike
    Feb 27, 2009 at 14:10
2

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>
2
  • Now that is a solution with the cheapest possible marginal cost per new span!
    – mike
    Feb 27, 2009 at 14:13
  • I especially like the way the onclick handlers are created dynamically and reference the spans directly. No need for ids or previous/nextSibling which might lead to errors because of unexpected textnodes.
    – Turismo
    Feb 27, 2009 at 21:22
0

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
0

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>
3
  • you should hide the sender and show the target, no need for if/else
    – roman m
    Feb 27, 2009 at 6:41
  • if you hide the sender you can't toggle back
    – Jason
    Feb 27, 2009 at 6:43
  • you should click on the other span to toggle back, i reworked your code a bit
    – roman m
    Feb 27, 2009 at 6:47
0

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>
0

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

-2

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.

2
  • Even when the question asks for no jQuery, it's still “use jQuery”... seriously, it's a few lines of JS... frameworks can be very nice but here they have almost nothing to offer. There simply aren't any FUD ‘browser bugs’ regarding toggling display values.
    – bobince
    Feb 27, 2009 at 13:41
  • I know he asked for "no jQuery", and I think that approach is a more serious problem then the specific issue at hand. Maybe no FUD browser bugs in toggling display values, but still, his page and his scripting needs will likely grow later. Better to start with jQuery from the get-go.
    – Thilo
    Feb 28, 2009 at 4:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.