<template> <div> <span class="niveau" id="recues" v-on:click="naviguer">Maj Recues</span><br> <div id="detailRecues" class="masque"><p>Liste des maj recues</p></div> <span class="niveau" id="proposees" v-on:click="naviguer">Maj Proposées</span> <div id="detailProposees" class="masque"><p>Liste des maj proposees</p></div> </div> </template> <script> export default { name: "Maj", methods: { naviguer: function (e) { e.target.classList.toggle("niveau-down") //alert(e.target.id) document.getElementById("detail" + e.target.id[0].toUpperCase() + e.target.id.substring(1)).classList.toggle('affiche') } } } </script> <style scoped> div{ text-align: center; } .niveau::before { content: "\25B6"; color: black; display: inline-block; margin-left: 2px; margin-right: 4px; } .niveau-down::before { transform: rotate(90deg); } .masque { display: none; } .affiche { display: block; } </style>