In one of my pages, I have an area at the bottom of the page that contains 9 buttons, each button opens an onclick div and closes it if we click the button (thanks to a native JavaScript function).
No problem except that I would like that when I click on a button will automatically return the contents of the previous one to display: none;.
I included jQuery but I have a little trouble to understand the tool that will be most useful. Is toggle the solution? A thought trail please.
function myFunction(button, id) {
var x = document.getElementById(id);
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}<div class="zone-bas">
<nav>
<ul id="menu">
<li class="nav1 menu-bas">
<button class="btnBas" onclick="myFunction(this, 'page_publications');"><b>Publications</b> </button><!--el.classList.toggle('nom-class') dans le onclick. Regarder si fonctionne avec Id aussi-->
</li>
<li class="nav2 menu-bas"><button class="btnBas" onclick="myFunction(this, 'page_associatif');"><b>Associatif</b> </button></li>
<li class="nav3 menu-bas"><button class="btnBas" onclick="myFunction(this, 'page_photos-videos');"><b>Photos/Vidéos</b></button></li>
<li class="nav4 menu-bas"><button class="btnBas" onclick="myFunction(this, 'page_boutique');"><b>Boutique</b></button></li>
<li class="nav5 menu-bas"><button class="btnBas" onclick="myFunction(this, 'page_jeux');"><b>Jeux concours</b></button></li>
<li class="nav6 menu-bas"><button class="btnBas" onclick="myFunction(this, 'page_evenements');"><b>Evènements</b></button></li>
<li class="nav7 menu-bas"><button class="btnBas" onclick="myFunction(this, 'page_prestation');"><b>Soumettre une prestation</b></button></li>
<li class="nav8 menu-bas"><button class="btnBas" onclick="myFunction(this, 'page_crowdfunding');"><b>Crowdfunding</b></button></li>
<li class="nav9 menu-bas"><button class="btnBas" onclick="myFunction(this, 'page_contact');"><b>Contacter</b></button></li>
</ul>
</nav>
</div>
<!--===\\\LES ELEMENTS DE LA NAV A AFFICHER///===-->
<!--===\\\=================================///===-->
<div class="wrapconteneur">
<div class="wrapper">
<section id="content">
<!--===\\\ PAGE PUBLICATIONS ///===-->
<!--===\\\===================///===-->
<article id="page_publications" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_7">
<div class="pad_right1">
<p> CECI EST UN TEST D'AFFICHAGE</p>
</div>
</div>
</div>
</div>
</div>
</article>
<!--===\\\ PAGE ASSOCIATIF ///===-->
<!--===\\\=================///===-->
<article id="page_associatif" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page</h1>
<p>contenu libre ici </p>
</div>
</div>
</div>
</div>
<div class="jrebandeau box_color box box_bandeau">
<div class="scroll">
<ul class="gallery1">
<li><img src='Images/'></li>
<li><img src='Images/'></li>
<li><img src='Images/'></li>
<li><img src='Images/'></li>
</ul>
</div>
</div>
</article>
<!--===\\\ PAGE PHOTOS/VIDEOS ///===-->
<!--===\\\====================///===-->
<article id="page_photos-videos" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page --></h1>
<p>contenu libre ici --></p>
</div>
</div>
</div>
</div>
<div class='jregal box_color' id='c96cf25167188b00c2d8288850341a7f'>
<div class="previousnext">
<a href="#" class="previous"><img src="images/arrow_left.png" width="30"></a>
<a href="#" class="next"><img src="images/arrow_right.png" width="30"></a>
</div>
<div class='gal_pics'>
<img height='595' src='#' id='' class='active' >
<img height='595' src='#' id='' >
<img height='595' src='#' id='' >
<img height='595' src='#' id='' >
<img height='595' src='#' id='' >
<img height='595' src='#' id='' >
<img height='595' src='#' id='' >
<img height='595' src='#' id='' >
<img height='595' src='#' id='' >
<img height='595' src='#' id='' >
<img height='595' src='#' id='' >
<img height='595' src='#' id='' >
</div>
<div class="gall_thumbs ">
<div class="scrollableArea">
<ul class='gallpan panactive'>
<li class='thumb_col'>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
</li>
<li class='thumb_col'>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
</li>
</ul>
<ul class='gallpan'>
<li class='thumb_col'>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
</li>
</ul>
<div>
<a href='#' style='color:white; margin-left: 200px;' target='_blank'>Liens vers ???</a>
</div>
</div>
<div class="thumb_previousnext">
<a href="#" class="previous"><img src="images/avant.png" width="37"></a>
<a href="#" class="next"><img src="images/apres.png" width="37"></a>
</div>
</div>
<!-- VIDEOS -->
<!--\\\==///-->
<!--===\\\ PAGE BOUTIQUE ///===-->
<!--===\\\===============///===-->
<article id="page_boutique" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">
<!-- titre de la page -->
</h1>
<p>
<!-- contenu libre ici -->
</p>
</div>
</div>
</div>
</div>
<!--===\\\ PAGE JEUX CONCOURS ///===-->
<!--===\\\====================///===-->
<article id="page_jeux" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">
<!-- titre de la page -->
</h1>
<br />
<p>
<!-- contenu libre ici -->
</p>
</div>
</div>
</div>
</div>
<!--===\\\ PAGE EVENEMENTS ///===-->
<!--===\\\=================///===-->
<article id="page_evenements" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page ici --></h1>
<p>contenu libre ici --></p>
</div>
</div>
</div>
</div>
<!--===\\\ PAGE PRESTATION ///===-->
<!--===\\\=================///===-->
<article id="page_prestation" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page --></h1>
<p>contenu libre ici (un formulaire ici? A définir) --></p>
</div>
</div>
</div>
</div>
</article>
<!--===\\\ PAGE CROWDFUNDING ///===-->
<!--===\\\===================///===-->
<article id="page_crowdfunding" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page --></h1>
<p>contenu libre ici (un formulaire ici? A définir) --></p>
</div>
</div>
</div>
</div>
</article>
<!--===\\\ PAGE CONTACT ///===-->
<!--===\\\==============///===-->
<article id="page_contact" style="display:none;">
<!--===\\\ FORMULAIRE DE CONTACT ///===-->
<!--===\\\=======================///===-->
</article>
</article>
</article>
</article>
</div>
</article>
</section>
</div>
<!-- the code is not complete in this exemple, so the end of this exemple is just here to close the div ... -->There's no reason to use jQuery just for one method. To achieve what you need you can simply select all the other article elements and then hide them before you hide/show the one related to the button which was clicked on.
You can also simplify and improve your logic by using removing the outdated inline onclick event attribute and using unobtrusive event handlers, like this:
document.querySelectorAll('.btnBas').forEach(function(btn) {
btn.addEventListener('click', function(e) {
e.preventDefault();
var id = this.dataset.target;
document.querySelectorAll('#content article').forEach(function(el) {
if (el.id != id)
el.style.display = 'none';
});
var target = document.getElementById(id);
target.style.display = target.style.display == 'none' ? 'block' : 'none';
});
});<div class="zone-bas">
<nav>
<ul id="menu">
<li class="nav1 menu-bas"><button class="btnBas" data-target="page_publications"><b>Publications</b> </button>
</li>
<li class="nav2 menu-bas"><button class="btnBas" data-target="page_associatif"><b>Associatif</b> </button></li>
<li class="nav3 menu-bas"><button class="btnBas" data-target="page_photos-videos"><b>Photos/Vidéos</b></button></li>
<li class="nav4 menu-bas"><button class="btnBas" data-target="page_boutique"><b>Boutique</b></button></li>
<li class="nav5 menu-bas"><button class="btnBas" data-target="page_jeux"><b>Jeux concours</b></button></li>
<li class="nav6 menu-bas"><button class="btnBas" data-target="page_evenements"><b>Evènements</b></button></li>
<li class="nav7 menu-bas"><button class="btnBas" data-target="page_prestation"><b>Soumettre une prestation</b></button></li>
<li class="nav8 menu-bas"><button class="btnBas" data-target="page_crowdfunding"><b>Crowdfunding</b></button></li>
<li class="nav9 menu-bas"><button class="btnBas" data-target="page_contact"><b>Contacter</b></button></li>
</ul>
</nav>
</div>
<!--===\\\LES ELEMENTS DE LA NAV A AFFICHER///===-->
<!--===\\\=================================///===-->
<div class="wrapconteneur">
<div class="wrapper">
<section id="content">
<!--===\\\ PAGE PUBLICATIONS ///===-->
<!--===\\\===================///===-->
<article id="page_publications" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_7">
<div class="pad_right1">
<p> CECI EST UN TEST D'AFFICHAGE</p>
</div>
</div>
</div>
</div>
</div>
</article>
<!--===\\\ PAGE ASSOCIATIF ///===-->
<!--===\\\=================///===-->
<article id="page_associatif" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page</h1>
<p>contenu libre ici </p>
</div>
</div>
</div>
</div>
<div class="jrebandeau box_color box box_bandeau">
<div class="scroll">
<ul class="gallery1">
<li><img src='Images/'></li>
<li><img src='Images/'></li>
<li><img src='Images/'></li>
<li><img src='Images/'></li>
</ul>
</div>
</div>
</article>
<!--===\\\ PAGE PHOTOS/VIDEOS ///===-->
<!--===\\\====================///===-->
<article id="page_photos-videos" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page --></h1>
<p>contenu libre ici --></p>
</div>
</div>
</div>
</div>
<div class='jregal box_color' id='c96cf25167188b00c2d8288850341a7f'>
<div class="previousnext">
<a href="#" class="previous"><img src="images/arrow_left.png" width="30"></a>
<a href="#" class="next"><img src="images/arrow_right.png" width="30"></a>
</div>
<div class='gal_pics'>
<img height='595' src='#' id='' class='active'>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
</div>
<div class="gall_thumbs ">
<div class="scrollableArea">
<ul class='gallpan panactive'>
<li class='thumb_col'>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
</li>
<li class='thumb_col'>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
</li>
</ul>
<ul class='gallpan'>
<li class='thumb_col'>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
</li>
</ul>
<div>
<a href='#' style='color:white; margin-left: 200px;' target='_blank'>Liens vers ???</a>
</div>
</div>
<div class="thumb_previousnext">
<a href="#" class="previous"><img src="images/avant.png" width="37"></a>
<a href="#" class="next"><img src="images/apres.png" width="37"></a>
</div>
</div>
<!-- VIDEOS -->
<!--\\\==///-->
<!--===\\\ PAGE BOUTIQUE ///===-->
<!--===\\\===============///===-->
<article id="page_boutique" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">
<!-- titre de la page -->
</h1>
<p>
<!-- contenu libre ici -->
</p>
</div>
</div>
</div>
</div>
<!--===\\\ PAGE JEUX CONCOURS ///===-->
<!--===\\\====================///===-->
<article id="page_jeux" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">
<!-- titre de la page -->
</h1><br />
<p>
<!-- contenu libre ici -->
</p>
</div>
</div>
</div>
</div>
<!--===\\\ PAGE EVENEMENTS ///===-->
<!--===\\\=================///===-->
<article id="page_evenements" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page ici --></h1>
<p>contenu libre ici --></p>
</div>
</div>
</div>
</div>
<!--===\\\ PAGE PRESTATION ///===-->
<!--===\\\=================///===-->
<article id="page_prestation" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page --></h1>
<p>contenu libre ici (un formulaire ici? A définir) --></p>
</div>
</div>
</div>
</div>
</article>
<!--===\\\ PAGE CROWDFUNDING ///===-->
<!--===\\\===================///===-->
<article id="page_crowdfunding" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page --></h1>
<p>contenu libre ici (un formulaire ici? A définir) --></p>
</div>
</div>
</div>
</div>
</article>
<!--===\\\ PAGE CONTACT ///===-->
<!--===\\\==============///===-->
<article id="page_contact" style="display:none;">
<!--===\\\ FORMULAIRE DE CONTACT ///===-->
<!--===\\\=======================///===-->
</article>
</article>
</article>
</article>
</div>
</article>
</section>
</div>
<!-- the code is not complete in this exemple, so the end of this exemple is just here to close the div ... -->I have an obligation to use jQuery...
In that case:
$('.btnBas').on('click', function(e) {
e.preventDefault();
$('#content article').not(this).hide();
$('#' + $(this).data('target')).toggle();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="zone-bas">
<nav>
<ul id="menu">
<li class="nav1 menu-bas"><button class="btnBas" data-target="page_publications"><b>Publications</b></button></li>
<li class="nav2 menu-bas"><button class="btnBas" data-target="page_associatif"><b>Associatif</b> </button></li>
<li class="nav3 menu-bas"><button class="btnBas" data-target="page_photos-videos"><b>Photos/Vidéos</b></button></li>
<li class="nav4 menu-bas"><button class="btnBas" data-target="page_boutique"><b>Boutique</b></button></li>
<li class="nav5 menu-bas"><button class="btnBas" data-target="page_jeux"><b>Jeux concours</b></button></li>
<li class="nav6 menu-bas"><button class="btnBas" data-target="page_evenements"><b>Evènements</b></button></li>
<li class="nav7 menu-bas"><button class="btnBas" data-target="page_prestation"><b>Soumettre une prestation</b></button></li>
<li class="nav8 menu-bas"><button class="btnBas" data-target="page_crowdfunding"><b>Crowdfunding</b></button></li>
<li class="nav9 menu-bas"><button class="btnBas" data-target="page_contact"><b>Contacter</b></button></li>
</ul>
</nav>
</div>
<!--===\\\LES ELEMENTS DE LA NAV A AFFICHER///===-->
<!--===\\\=================================///===-->
<div class="wrapconteneur">
<div class="wrapper">
<section id="content">
<!--===\\\ PAGE PUBLICATIONS ///===-->
<!--===\\\===================///===-->
<article id="page_publications" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_7">
<div class="pad_right1">
<p> CECI EST UN TEST D'AFFICHAGE</p>
</div>
</div>
</div>
</div>
</div>
</article>
<!--===\\\ PAGE ASSOCIATIF ///===-->
<!--===\\\=================///===-->
<article id="page_associatif" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page</h1>
<p>contenu libre ici </p>
</div>
</div>
</div>
</div>
<div class="jrebandeau box_color box box_bandeau">
<div class="scroll">
<ul class="gallery1">
<li><img src='Images/'></li>
<li><img src='Images/'></li>
<li><img src='Images/'></li>
<li><img src='Images/'></li>
</ul>
</div>
</div>
</article>
<!--===\\\ PAGE PHOTOS/VIDEOS ///===-->
<!--===\\\====================///===-->
<article id="page_photos-videos" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page --></h1>
<p>contenu libre ici --></p>
</div>
</div>
</div>
</div>
<div class='jregal box_color' id='c96cf25167188b00c2d8288850341a7f'>
<div class="previousnext">
<a href="#" class="previous"><img src="images/arrow_left.png" width="30"></a>
<a href="#" class="next"><img src="images/arrow_right.png" width="30"></a>
</div>
<div class='gal_pics'>
<img height='595' src='#' id='' class='active'>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
<img height='595' src='#' id=''>
</div>
<div class="gall_thumbs ">
<div class="scrollableArea">
<ul class='gallpan panactive'>
<li class='thumb_col'>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
</li>
<li class='thumb_col'>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
</li>
</ul>
<ul class='gallpan'>
<li class='thumb_col'>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
<a class='carre' href='#'><img src='#'></a>
</li>
</ul>
<div>
<a href='#' style='color:white; margin-left: 200px;' target='_blank'>Liens vers ???</a>
</div>
</div>
<div class="thumb_previousnext">
<a href="#" class="previous"><img src="images/avant.png" width="37"></a>
<a href="#" class="next"><img src="images/apres.png" width="37"></a>
</div>
</div>
<!-- VIDEOS -->
<!--\\\==///-->
<!--===\\\ PAGE BOUTIQUE ///===-->
<!--===\\\===============///===-->
<article id="page_boutique" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">
<!-- titre de la page -->
</h1>
<p>
<!-- contenu libre ici -->
</p>
</div>
</div>
</div>
</div>
<!--===\\\ PAGE JEUX CONCOURS ///===-->
<!--===\\\====================///===-->
<article id="page_jeux" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">
<!-- titre de la page -->
</h1><br />
<p>
<!-- contenu libre ici -->
</p>
</div>
</div>
</div>
</div>
<!--===\\\ PAGE EVENEMENTS ///===-->
<!--===\\\=================///===-->
<article id="page_evenements" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page ici --></h1>
<p>contenu libre ici --></p>
</div>
</div>
</div>
</div>
<!--===\\\ PAGE PRESTATION ///===-->
<!--===\\\=================///===-->
<article id="page_prestation" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page --></h1>
<p>contenu libre ici (un formulaire ici? A définir) --></p>
</div>
</div>
</div>
</div>
</article>
<!--===\\\ PAGE CROWDFUNDING ///===-->
<!--===\\\===================///===-->
<article id="page_crowdfunding" style="display:none;">
<div class="wrapper zone_texte">
<div class="container_9">
<div class="text">
<div class="grid_6">
<h1 class="pad_bot1">titre de la page --></h1>
<p>contenu libre ici (un formulaire ici? A définir) --></p>
</div>
</div>
</div>
</div>
</article>
<!--===\\\ PAGE CONTACT ///===-->
<!--===\\\==============///===-->
<article id="page_contact" style="display:none;">
<!--===\\\ FORMULAIRE DE CONTACT ///===-->
<!--===\\\=======================///===-->
</article>
</article>
</article>
</article>
</div>
</article>
</section>
</div>
<!-- the code is not complete in this exemple, so the end of this exemple is just here to close the div ... -->