afficher/masquer sans cadre

Question

Recherche d'un script, qui peut faire afficher/masquer des fonctions sans cadre.

Quelque chose comme:

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

.toggle { display: none; } 

Bloc .toggle doit être affiché après avoir cliqué sur le span. Comme toggle() sur jQuery.

Merci.

Answer 1

regarder ici pour créer une fonction getElementByClass - http://www.dustindiaz.com/getelementsbyclass/

alors quelque chose comme ça (ont pas vérifié si cela fonctionne, mais vous voyez l'idée):

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

Answer 2

Je voudrais créer deux méthodes ajouter/supprimer des toggle classe avec JavaScript natif:

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

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

Vous aurez besoin du code qui place l'événement onclick sur la durée. Connaissez-vous cela?

Answer 3

Il utilise une carte d'identité sur la bloc caché pour comprendre quelle div pour basculer. C'est avec l'hypothèse que vous voulez basculer d'un bloc par intervalle cliquable. La méthode d'écouteur d'événement est une norme W3C, mais je ne suis pas sûr si IE l'implémente - faites des tests pour être sûr.

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, va dans un bloc de script dans votre tête ou dans un fichier .js séparé:

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 
    ); 
} 

Là-bas, pas de JS dans votre code 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

D'abord, il y a une fonction qui va créer une fonction de basculement unique pour tout élément que vous lui donnez. Ensuite, nous attendons le chargement de la fenêtre, et quand c'est le cas, nous créons des fonctions à bascule. Dans cet exemple, nous supposons que vous avez un élément avec id = 'some_id', mais vous pouvez utiliser tout ce dont vous avez besoin pour obtenir un élément. Ensuite, nous plaçons la fonction Toggle dans une variable globale.

 
// 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')); 
} 

Vous pouvez ensuite basculer l'élément à chaque fois que vous avez besoin, avec GLOBAL.toggle_element().

Aussi, je pense que c'est le code pour IE si vous voulez attendre le chargement de la page.

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

EDIT:

Ajouter cette fonction (de http://www.dustindiaz.com/getelementsbyclass/ comme mentioed par 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; 
} 

Et puis ajoutez ce qui suit dans la fonction 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(); 
     } 
}; 

Et maintenant vous pouvez appeler GLOBAL.toggle_all() et il va cacher tous les éléments qui ont la classe toggle.