Usunięcie elementu po ponownym kliknięciu

[Makary155]

Napisałem prosty skrypt na "okienko informacyjne" - po kliknięciu na obrazek wyświetla jakąś informację zawartą w ukrytym divie o id podanym w parametrze. Owe okienko jest "przylepione" do strony tak jak owe obrazki(position: fixed)

function quickPanel(type, offset)
{
    
    
    body=document.getElementsByTagName('body')[0];

    element= document.createElement('div');
    element.style.id="bloczek";
    element.style.background="black";
    element.style.border="5px outset green";
    element.style.left="45";
    element.style.position="fixed";

    if (offset)
    {
    element.style.top=offset;
    }
    else
    {
    element.style.top="0px";
    }
    element.innerHTML=document.getElementById(type).innerHTML;
    element.innerHTML+="<center><br><br><a href=\"#\" onclick=\"panelClose(); return false;\">Zamknij</a></center>";
    
    body.appendChild(element);

}
function panelClose()
{
    
    if (element)
    {
    body.removeChild(body.lastChild);
    }
}

Tych obrazków na które się klika jest 4, każdy z innego diva. Jak zrobić żeby okienko zamykało się gdy się kliknie na inny obrazek i otwierało inne a gdy kliknę na ten sam to je zamykało?

Żeby było jasno - tak jest przed kliknięciem:

A tak po kliknięciu na tą bryłkę czegoś:

I teraz gdy klknę na przykład na kwiatek to otwiera się okienko od kwiatka a zamyka od bryłki, a gdy kliknę znowu na bryłkę to okienko od bryłki się zamyka.

[gnysek]

1. Pobierz jQuery

2. zakładając, że wszystkie 4 divy z tabelkami są w takiej strukturze:

 

<div id="calosc">
<div id="tabelka1">...</div>
<div id="tabelka2">...</div>
<div id="tabelka3">...</div>
<div id="tabelka4">...</div>
</div>

 

w onclick dajesz:

$('#calosc div').each(function(){ $(this).hide(); }); $('#tabelkaX').show();

[Kofel]

Gnysiu, nie wymuszaj użycia jQuery

[gnysek]

ok, może być prototype, czy mootools - ale uważam za bezsens pisanie tego w czystym JS, zwłaszcza, że w pewnym momencie dochodzi kompatybilność z przeglądarkami

[Tymon]

Chyba śmieszny jesteś. Żadna osoba która zna czystego JSa nie napisze Ci skryptu który nie zadziała pod każdą z popularnych przeglądarek. Po za tym, patrząc na złożoność problemu mogę Ci z miejsca powiedzieć, że użyć tu trzeba tylko jednej funkcji która mimo wszystko jest dostępna na każdej przeglądarce. getElementById. Opcjonalnie getElementsByTagName.

 

<div id="buttons">
<div>a</div>
<div>b</div>
<div>c</div>
<div>d</div>
</div>
<div id="containers">
<div>show a</div>
<div>show b</div>
<div>show c</div>
<div>show d</div>
</div>
<script>
var buttons = document.getElementById( 'buttons' );
var containers = document.getElementById( 'containers' );
if( buttons && containers ) {
    buttons = buttons.getElementsByTagName( 'div' );
    containers = containers.getElementsByTagName( 'div' );
    if( buttons.length == containers.length ) {
        for( var i = 0; i < buttons.length; i += 1 ) {
            buttons[i].container = containers[i];
            buttons[i].onclick = function() {
                for( var n = 0; n < buttons.length; n += 1 ) {
                    if( containers[n] != this.container ) {
                        containers[n].style['display'] = 'none';
                    }
                }
                if( this.container.style['display'] == 'block' ) {
                    this.container.style['display'] = 'none';
                }
                else {
                    this.container.style['display'] = 'block';
                }
                return false;
            }
            containers[i].style['display'] = 'none';
        }
    }
}
</script>

[Kofel]

Eh, Ah, profesjonalna webdeveloperka :D

[Tymon]

Ta, odwalona w 5 minut na kacu. Jeszcze po drodze porobiłem całą masę literówek.

[Makary155]

1. Pobierz jQuery

2. zakładając, że wszystkie 4 divy z tabelkami są w takiej strukturze:

 

<div id="calosc">
<div id="tabelka1">...</div>
<div id="tabelka2">...</div>
<div id="tabelka3">...</div>
<div id="tabelka4">...</div>
</div>

 

w onclick dajesz:

$('#calosc div').each(function(){ $(this).hide(); }); $('#tabelkaX').show();

Nie zadziałało to do końca tak jak chciałem - po ponownym kliknięciu na wyzwalacz otwartego okienka ono zamykało się i otwierało znów, udało mi się to załatwić na piechotę, czyli w każdym onclick 3xhide a ostatni toggle, czyli na przykład otwierając tabelke 4:

onclick="$('#tabelka1').hide(); $('#tabelka2').hide(); $('#tabelka3').hide(); $('#tabelka4').toggle('slow');"

Przy małej ilości ikon jakoś do przełknięcia, ale czy nie da się jakoś to skrócić?

[gnysek]

Pewnie, że da. Możesz np. do zmiennej zapamietywać ostatnio klikniety div.