Problème pour montrer/cacher un élément

a marqué ce sujet comme résolu.
Banni

Bonjour, j'ai utilisé ce petit script sur une image pour afficher un lien Montrer/Cacher en javascript. Montrer/Cacher montre et cache ( :) ) un iframe .html tiré d'un document libreoffice.

Avec le code ci-dessous, cela fonctionne très bien, le seul problème étant que la cible aoch.html s'écrit par dessus le BLABLABLA, c'est à dire les autres images pour montrer/cacher un article. Le but est donc d'afficher aoch.html seul dans l'id page_win en cachant et le titre <H1> et le BLABLABLA et de revenir à l'état précédent lors d'un nouveau clic sur Montrer/Cacher.

Un effet sympa pourrait aussi être de repousser le BLABLABLA à la fin de l'affichage de aoch.html

Voici le code : 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<div id="page_win" class="page" style="visibility:hidden; border-color:rgba(205,184,37,1); box-shadow:0px 4px 15px rgba(12,179,238,1);">
            <h1>
                TITRE
            </h1>

            <div class="container" style="">

    <img src="fichiers/aoc-banner.png" style="" />
    <div class="covering background"></div>
    <div class="covering foreground">
        <a onclick ="javascript:ShowHide('HiddenDiv')" href="javascript:;" >Montrer/Cacher</a>
        <div class="mid" id="HiddenDiv" style="DISPLAY: none" >

        <iframe style=" margin-top:75px; padding:0px; border:1px; width:1190px; height: 640px;" src="fichiers/aoch.html"></iframe>

        </div>
    </div>
            </div>
BLABLABLA
</div>

et le javascript dans le <head>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<script>
function ShowHide(divId)
{
if(document.getElementById(divId).style.display == 'none')
{
document.getElementById(divId).style.display='block';
}
else
{
document.getElementById(divId).style.display = 'none';
}
}
</script>

J'espère que j'ai bien exposé mon problème, merci de votre aide. ;)

+0 -0

Salut !

Là, comme ça, je pense que je changerais un brin la structure en ajoutant deux conteneurs avec la même classe, ces deux conteneurs englobant la partie avant ton div#HiddenDiv et celle d'après. Quand tu affiches div#HiddenDiv, tu caches les deux autres, et vice-versa.

+0 -0

Attention quand même c'est pas aussi simple que "t'as tout mis dans le head, c'est nul !".

C'est pas si nul que ça, c'est même parfois la meilleure façon de procéder, en utilisant correctement les attributs async et defer et bien entendu, dans les scripts, attendre que le DOM soit entièrement chargé pour commencer à le manipuler.

+1 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte