<ul class="horrizontal-form">
    <li>Je suis un(e)</li>
    <li class="gender-img">
        <img id="6_image" alt="1" onclick="showThis()" alt="" src="./img/1.png">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <img id="5_image" alt="2" onclick="showThis()" src="./img/2.gif">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <img id="4_image" alt="3" onclick="hideThis()" src="./img/3.gif">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <img id="1_image" alt="4" onclick="hideThis()" src="./img/4.gif">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <img id="2_image" alt="5" onclick="hideThis()" src="./img/5.gif">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <img id="3_image" alt="6" onclick="showThis()" src="./img/6.gif" >
    </li>
</ul>

Bonjour,
D'après ce que j'ai compris, tu as 6 images.
Deux d'entre elles doivent faire apparaître l'input "divacacher",
et les 4 autres doivent masquer l'input "divacacher.

[b]Javascript :[/b]

Voici ma proposition :
hideThis => Masque ton input "divacacher"
showThis => affiche ton input "divacacher"

[code]
<script type="text/javascript">
function hideThis(){
var obj = document.getElementById('divacacher');
obj.style.display = "none";
}

function showThis()
{
var obj = document.getElementById('divacacher');
obj.style.display = "block";
}
</script>[/code]


[b]HTML :[/b]

- Toutes les images devant masquer la div auront : onclick="hideThis()"
- Toutes les images devant afficher la div auront onclick="showThis()"

[html]
<ul class="horrizontal-form">
<li>Je suis un(e)</li>
<li class="gender-img">
<img id="6_image" alt="1" onclick="showThis()" alt="" src="./img/1.png">
&nbsp;&nbsp;&nbsp;&nbsp;
<img id="5_image" alt="2" onclick="showThis()" src="./img/2.gif">
&nbsp;&nbsp;&nbsp;&nbsp;
<img id="4_image" alt="3" onclick="hideThis()" src="./img/3.gif">
&nbsp;&nbsp;&nbsp;&nbsp;
<img id="1_image" alt="4" onclick="hideThis()" src="./img/4.gif">
&nbsp;&nbsp;&nbsp;&nbsp;
<img id="2_image" alt="5" onclick="hideThis()" src="./img/5.gif">
&nbsp;&nbsp;&nbsp;&nbsp;
<img id="3_image" alt="6" onclick="showThis()" src="./img/6.gif" >
</li>
</ul>
[/html]

Bonjour tous le monde,

J'aurai besoin d'aide sur mon code qui fonctionne bien mais pas comme je veux, je m'explique.
J'ai 4 petites image bouton qui ce trouve au dessus d'un formulaire, quant je clique sur deux d'entre elle fait apparaitre un input.

Mon problème est là, quant je clic sur l'image bouton qui fait apparaitre le input pas de problème c'est que ça fonctionne.
Mais si je clic a la suite sur une autre image qui doit pas faire apparaitre le input elle dois le faire disparaitre.

Et la ça fonctionne pas voilà mon code :

[code]
<script type="text/javascript">
function hideThis(_div){
var obj = document.getElementById('divacacher');
if(obj.style.display == "none")
obj.style.display = "block";
else
obj.style.display = "none";
}
</script>
[/code]

[code]
<form role="form" class="search-form" id="registration" action="production/inscription/inscription.php" method="GET" >
<ul class="horrizontal-form">
<li>Je suis un(e)</li>
<li class="gender-img">
<img id="6_image" onclick="add_6(); remove_5(); remove_4(); remove_1(); remove_2(); remove_3()" alt="" src="./img/1.png">
&nbsp;&nbsp;&nbsp;&nbsp;
<img id="5_image" alt="" onclick="add_5(); remove_6(); remove_4(); remove_1(); remove_2(); remove_3()" src="./img/2.gif">
&nbsp;&nbsp;&nbsp;&nbsp;
<img id="4_image" alt="4" onclick="add_4(); remove_5(); remove_6(); remove_1(); remove_2(); remove_3(); hideThis()" src="./img/3.gif">
&nbsp;&nbsp;&nbsp;&nbsp;
<img id="1_image" alt="" onclick="add_1(); remove_6(); remove_5(); remove_4(); remove_2(); remove_3(); hideThis()" src="./img/4.gif">
&nbsp;&nbsp;&nbsp;&nbsp;
<img id="2_image" alt="" onclick="add_2(); remove_6(); remove_5(); remove_4(); remove_1(); remove_3(); hideThis()" src="./img/5.gif">
&nbsp;&nbsp;&nbsp;&nbsp;
<img id="3_image" alt="" onclick="add_3(); remove_6(); remove_5(); remove_4(); remove_2(); remove_1()" src="./img/6.gif" >
</li>
</ul>
<input type="hidden" id="gendr" value="homme" name="gender" required="">
<div class="col-lg-6">
<div class="input-group">
<input type="text" id="username" class="field" name="username" placeholder="Pseudo" required="required" data-error="Firstname is required." >
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="password" id="password" class="field" name="password" placeholder="Mot de passe" required="required" data-error="Firstname is required." >
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<span class="algolia-places" style="position: relative; display: inline-block; direction: ltr;">
<input type="text" class="field ap-input" id="city" placeholder="ville" name="city" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="both" aria-expanded="false" aria-labelledby="city" aria-owns="algolia-places-listbox-0" dir="auto" style="position: relative; vertical-align: top;" required="required">
<pre aria-hidden="true" style="position: absolute; visibility: hidden; white-space: pre; font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: normal; word-spacing: 0px; letter-spacing: normal; text-indent: 0px; text-rendering: auto; text-transform: none;">
</pre>
<span class="ap-dropdown-menu" role="listbox" id="algolia-places-listbox-0" style="position: absolute; top: 100%; z-index: 100; display: none; left: 0px; right: auto;">
<div class="ap-dataset-places">
</div></span><button type="button" class="ap-input-icon ap-icon-clear" style="display: none;"><svg width="12" height="12" viewBox=""></path></svg>
</button><button type="button" class="ap-input-icon ap-icon-pin"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox=""></path></svg>
</button></span>
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="field" id="zip" placeholder="Code postal" name="zip" readonly="">
</div>
</div>
<br>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="field" id="region" placeholder="Région" name="region" readonly="">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="field" id="countrys" placeholder="Pays" name="countrys" readonly="">
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input type="email" class="field" id="email" name="email" placeholder="Email" data-error="Cette adresse email est invalide" required="required" >
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input class="field" id="date" name="date1" placeholder="Votre date de naissance" type="date" required="required"/>
</div>
</div>
<div class="col-lg-6">
<div class="input-group">
<input class="field" id="divacacher" name="date4" placeholder="Date de naissance de votre conjoint ou ami(e)" type="date" style="display:none;"/>
</div>
</div>
<br>
<br>
<div class="row">
<div class="col-sm-5">
<input type="submit" class="reg_frnt_btn reg-field" value="ENREGISTRER">
</div>
</div>

[/code]

Merci de votre aide