Pages :
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 Smiley bawling
#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;
}
ah oui tu es obliger. tu adapte ton css avec ton nouvelle ID,

Tu laisse l'existant, parce que ça fonctionne, et tu refais pareil avec le nouvelle ID
Modifié par JENCAL (14 Oct 2019 - 11:51)
<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 ?
Lorsque j'utilise ton code dans code pen il fonctionne correctement et mon code entier sur ma page html ne fonctionne pas..
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)
Normale Smiley smile
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)
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