Использовать JQuery Toggle?

Question

На одной из моих страниц у меня есть область внизу страницы, которая содержит 9 кнопок, каждая кнопка открывает элемент onclick и закрывает его, если мы нажимаем кнопку (благодаря встроенной функции JavaScript).

Нет проблем, за исключением того, что мне хотелось бы, чтобы при нажатии на кнопку содержимое предыдущей автоматически возвращалось к display: none;.

Я включил jQuery, но у меня возникли небольшие проблемы с пониманием инструмента, который будет наиболее полезным. toggle решение? След мысли, пожалуйста.

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>&nbsp;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 ... -->

Answer 1

Нет причин использовать jQuery только для одного метода. Чтобы достичь того, что вам нужно, вы можете просто выбрать все остальные элементы article и затем скрыть их, прежде чем скрыть / показать элемент, связанный с кнопкой, на которую вы нажали.

Вы также можете упростить и улучшить свою логику, удалив устаревший встроенный атрибут события onclick и используя ненавязчивые обработчики событий, например:

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>&nbsp;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 ... -->

У меня есть обязательство использовать jQuery ...

В этом случае:

$('.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>&nbsp;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 ... -->