Onglet déroulant

Bonjour,

J'ai un soucis d'affichage, j'aimerai lorsque je clique sur SAP ou GED des options s'affiche mais les deux ne fonctionnent pas il n'y a en qu'un sur deux qui s'ouvre.
Pouvez vous m'aider à y voir plus clair ?

Voici mon code :

<div id="options" class="display-8 text-center">
                <p class="show">
                    <a href="#options" style="color:black">SAP &darr;</a>
                </p>
                <p class="hide">
                    <a href="#start" style="color:black">SAP &uarr;</a>
                </p>

                <p class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                    <label class="form-check-label" for="inlineRadio1">A</label>
                </p>

                <p class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                    <label class="form-check-label" for="inlineRadio2">B</label>
                </p>

                <p class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                    <label class="form-check-label" for="inlineRadio2">C</label>
                </p>

                <p class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                    <label class="form-check-label" for="inlineRadio2">D</label>
                </p>
            </div>

            <div id="options" class="display-8 text-center">
                <p class="show">
                    <a href="#options" style="color:black">GED &darr;</a>
                </p>
                <p class="hide">
                    <a href="#start" style="color:black">GED &uarr;</a>
                </p>

                <p class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1">
                    <label class="form-check-label" for="inlineRadio1">A</label>
                </p>

                <p class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                    <label class="form-check-label" for="inlineRadio2">B</label>
                </p>

                <p class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                    <label class="form-check-label" for="inlineRadio2">C</label>
                </p>

                <p class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2">
                    <label class="form-check-label" for="inlineRadio2">D</label>
                </p>
            </div>


            <button type="submit" class="col-md-12 btn btn-dark mb-4">Enregister</button>
        </form>
    </div>

</body>

</html>

Merci d'avance
Modifié par JLbq (14 Oct 2019 - 10:43)

Oui je l'ai oublier

#options{
    margin-bottom:20px;
    font-size: 20px;
}
#options p{
	display:none;
}
#options .show{
	display:block;
}
#options:target .show{
	display:none;
}
#options .hide{
	display:none;
}
#options:target .hide{
	display:block;
}
#options:target p{
	display:block;
}

Alors un ID c'est unique
id="options"
ne peut être qu'une seule fois dans TOUTE ta page

EDIT SUPPRIMER
Modifié par JENCAL (14 Oct 2019 - 11:35)

Merci mais que dois-je faire ? x)

bah ne pas mettre deux fois le même ID ^^

En changeant l'id je dois repasser par le css aussi ?

<div id="options" class="display-8 text-center">
<p class="show">
<a href="#options" style="color:black">GED &darr;</a>
</p>
<p class="hide">
<a href="#start" style="color:black">GED &uarr;</a>
</p>

si j’appelle l'id GED le a href doit aussi s'appeler #GED ?

Oui également,

https://codepen.io/JUSEN/pen/bGGpGaE

Lorsque j'utilise ton code dans code pen il fonctionne correctement et mon code entier sur ma page html ne fonctionne pas..

Ta page est accessible en ligne ?

Et oui mais tu as plusieurs DIV avec l'id Options....


<div id="options" class="display-8 text-center">
<p class="show">
<a href="#options" style="color:black">Logiciels requis &darr;</a>


Ca peut pas marcher faut faire le ménage
Modifié par JENCAL (14 Oct 2019 - 12:22)

En changeant les quatres option rien ne change : https://codepen.io/JLbq/pen/ExxKxqO?editors=1010 ..

Normale
Tes ID sont différents entre ton CSS et ton HTML
Tu as optionTrois en css et optionsTrois en html
Modifié par JENCAL (14 Oct 2019 - 12:53)

https://codepen.io/JLbq/pen/ExxKxqO?editors=1100

Meme en changeant le css le soucis reste le même..

JLbq a écrit :
https://codepen.io/JLbq/pen/ExxKxqO?editors=1100

Meme en changeant le css le soucis reste le même..

Ah non moi ça fonctionne ton lien

SAP et GED s'ouvrent bien, et se referme bien. et même Matériels requis Logiciels requis fonctionne
Modifié par JENCAL (14 Oct 2019 - 13:06)

Chez moi je me retrouve avec et je ne sais pas d'ou cela provient si ca marche chez toi..

SAP ?

SAP ?


A

B

C

D
GED ?

GED ?


A

B

C

D