show/hide without framework

Question

Searching for a script, which can do show/hide functions without framework.

Something like:

<span rel="toggle" href="/somelink.html">Title</span>
<div class="toggle">Hidden block</div>

.toggle { display: none; }

Block .toggle should be displayed after clicking on span. Like toggle() on jQuery.

Thanks.

Answer 1

I would create two methods that add/remove toggle class with native JavaScript:

function show(element) {
    element.className += " toggle";
}

function hide(element) {
    element.className = (element.className).replace(/\s*toggle/g, "");
}

You will need code that places the onclick event on the span. Are you familiar with that?

Answer 2

look here to create a getElementByClass function - http://www.dustindiaz.com/getelementsbyclass/

then something like this (haven't checked if it works, but you get the idea):

toggleItem = function(){
  var item = getElementByClass('toggle')[0];
  if (item.style.display == "block")
  {
    item.style.display = 'none';
  }
  else
  {
    item.style.display = 'block';
  }
}

Answer 3

This uses an id on the hidden block to figure out which div to toggle. This is with the assumption that you want to toggle one block per clickable span. The event listener method is a W3C standard, but I'm not sure if IE implements it - do some testing to be sure.

HTML:

<!-- the rel attribute in the span specifies which div to toggle -->
<span rel="target" id="trigger">Title</span>

<div id="target">Hidden block</div>

JavaScript, goes in a script block in your HEAD or in a separate .js file:

window.addEventListener('load', init, false);

function init() {
    document.getElementById('trigger').addEventListener(
        'click',
        function() {
            targetId = this.getAttribute('rel');
            var element = document.getElementById(targetId);
            if (element.style.display == 'block')
                element.style.display = 'none';
            else
                element.style.display = 'block';
        },
        false
    );
}

There, no JS in your HTML.

Answer 4

See it in action.

HTML

<span rel="hidden" href="/somelink.html" onclick="toggle(this)">Title</span>
<div class="toggle" id="hidden">Hidden block</div>

Javascript

function toggle(el) {
  if (!el.getAttribute("rel")) return;
  el = document.getElementById( el.getAttribute("rel"));
  var cname = " " + el.className + " ";
  if (cname.indexOf("toggle") !== -1) {
    cname = cname.replace(" toggle ", " ");
    el.className = cname.substring(1, cname.length-1);
  } else {
    el.className += " toggle";
  }
}

Answer 5

First, there's a function that will create a unique toggle function for whatever element you give it. Then, we wait for the window to load, and when it does, we create some toggle functions. In this example, we assume you have an element with id='some_id', but you can use whatever you need to get an element. Then, we stick the toggle function into a global variable.

// returns a function that will toggle the given element
function makeToggleFunction(el) {
        var element = el;
        return function() {
                if (element.style.display == 'none')
                        element.style.display = 'block';        
                else
                        element.style.display = 'none';

        };
}

window.addEventListener('load', on_window_load, false);
var GLOBAL = {};
function on_window_load() {
        GLOBAL.toggle_element = makeToggleFunction(document.getElementById('some_id'));
}

You can then toggle the element whenever you need, with GLOBAL.toggle_element().

Also, I think this is the code for IE if you want to wait for the page to load.

document.addEventListener("DOMContentLoaded", on_window_load, false);

EDIT:

Add this function (from http://www.dustindiaz.com/getelementsbyclass/ as mentioed by programatique)

function getElementsByClass(searchClass,node,tag) {
        var classElements = new Array();
        if ( node == null )
                node = document;
        if ( tag == null )
                tag = '*';
        var els = node.getElementsByTagName(tag);
        var elsLen = els.length;
        var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
        for (i = 0, j = 0; i < elsLen; i++) {
                if ( pattern.test(els[i].className) ) {
                        classElements[j] = els[i];
                        j++;
                }
        }
        return classElements;
}

And then add the following inside the function on_window_load:

GLOBAL.toggleable = new Array();
or each(var element in getElementsByClass('toggle')) {
        GLOBAL.toggleable.push(makeToggleFunction(element));
}
GLOBAL.toggle_all = function() {
        for each(var f in GLOBAL.toggleable) {
                f.call();
        }
};  

And now you can call GLOBAL.toggle_all() and it will hide all elements that have the class toggle.