[Résolu] Fermer une balise details sur un évènement

Gaara-ara

26 Nov 2022 à 02:17

Salut, j'ai besoin d'aide pour faire fonctionner ceci:
Je voudrait que truc1 se ferme quand j'ouvre truc2 sans que truc3 soit impacter.


<details open id="zone_1"><summary>truc1</summary></details>
<details id="zone_1"><summary>truc2</summary></details>
<details><summary>truc3</summary></details>


<script language="javascript">
    $('details').attr('id="zone_1"').click(function (event) {
        $('details').attr('id="zone_1"').not(this).removeAttr("open");  
        });
</script>

Modifié par Gaara-ara (26 Nov 2022 - 15:23)

Dave-Hiock

26 Nov 2022 à 13:59

\ô/

Gaara-ara a écrit :


&lt;details open id="zone_1"&gt;&lt;summary&gt;truc1&lt;/summary&gt;&lt;/details&gt;
&lt;details id="zone_1"&gt;&lt;summary&gt;truc2&lt;/summary&gt;&lt;/details&gt;

un(e) id doit être unique dans la page alors que tu as deux fois id="zone_1".

niuxe

Modérateur

26 Nov 2022 à 14:01

Salut,

Jette un oeil sur ce codepen Smiley cligne

edit :

Dave-Hiock a écrit :
\ô/

un(e) id doit être unique dans la page alors que tu as deux fois id="zone_1".

+1
Modifié par niuxe (26 Nov 2022 - 14:02)

Gaara-ara

26 Nov 2022 à 15:15

niuxe a écrit :
[...]

Dave-Hiock a écrit :
[...]

Merci beaucoup, j'en suis arriver à cela et ça fonctionne :


<details name="zone_1"><summary>truc1</summary></details>
<details name="zone_1"><summary>truc2</summary></details>
<details><summary>truc3</summary></details>


$('details[name="zone_1"]').each(function(){
  $(this).on('click', function(e){
    var has_not_open = typeof $(this).attr('open') === 'undefined'
    $('details[name="zone_1"]').removeAttr('open')
    if(!has_not_open){
      $(this).attr('open', 'open')
    }
  })
})

JavaScript, DOM et API Web HTML5

[Résolu] Fermer une balise details sur un évènement