<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>