Faire apparaître une catégorie en un clic

[chrisfra]

Bonsoir,

D'habitude je sais, en ayant un id différent, faire que lors d'un clic sur un bouton (par exemple Général), faire que la catégorie générale apparaisse, cependant sur ForumActif on est limité, on a pas accès à tout le code et j'avoue que ça me perturbe un peu par rapport à des CMS ou des sites fait main.

Deux des boutons pour afficher/masquer une catégorie :

Code:


<input type="image" id="image" value="afficher" onclick="masquer_div('a_masquer');" alt="Bouton General" width="140px" src="http://image.noelshack.com/fichiers/2019/04/7/1548600095-nav-general.png"/>
        <input type="image" id="image" value="afficher" onclick="masquer_div('a_masquer');" alt="Bouton Personnages" width="140px" src="http://image.noelshack.com/fichiers/2019/04/7/1548600095-nav-perso.png"/>


Le code d'affichage des catégories avec la fonction a_masquer

Code:


<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="forabg" id="a_masquer">
         <div class="ls-forum">
                          <div class="title_categ">{catrow.tablehead.L_FORUM}</div>
                          <!--<img src="http://image.noelshack.com/fichiers/2019/05/5/1549051729-titre-categorie-forum.png" height="100px"/>-->
         </div>
         <ul class="topiclist forums">
   <!-- END tablehead -->
                         


   <!-- BEGIN forumrow -->
            <li class="row">
                                 
                                  <div class="categ1">
                                      <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="60px"/>
                                     
                                      <div class="center-categ">
                                          <div class="title-categorie">
                                              <div class="title">
                                                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                                              </div>
                                          </div>
                                          <div class="desc-categorie">
                                              <div class="description">
                                                  {catrow.forumrow.FORUM_DESC}
                                              </div>
                                          </div>
                                      </div>
                                     
                                      <div class="right-categ">
                                          <div class="block-info-dernier-message">
                                              <div class="titre-info-dm"><a href="{catrow.forumrow.ads.LINK}"><a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a></a></div>
                                              <!--<div class="date-info-dm"> &nbsp; &nbsp;</div>-->
                                              <div class="pseudo-info-dm">{catrow.forumrow.USER_LAST_POST}</div>
                                          </div>
                                      </div>
                                  </div>
                                 
            </li>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </ul>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->


Le code JS :

Code:


<script>
function masquer_div(id)
{
  if (document.getElementById(id).style.display == 'none')
  {
      document.getElementById(id).style.display = 'block';
  }
  else
  {
      document.getElementById(id).style.display = 'none';
  }
}
</script>


Cependant ça ne fonctionne du coup qu'avec la première catégorie (Général) vu que la fonction ne s'applique pas à un id différent à chaque fois mais toujours le même, auriez-vous une solution ? Merci !

[*Splash*]

Hi,
Tu cherches à reproduire quelque chose comme ça ? Clique

[Invité]

Hello Christa,

tu as cette astuce sur mon fofo postée par SeLfde4Th7 :

https://www.milouze14.com/t29165-toutes-versions-categories-a-onglets#559057

Voir le résultat final ici:
http://testphpbb3.1fr1.net/

a++

[chrisfra]

Merci Milouze, c'est ce que je voulais ! Cependant après avoir fait comme indiqué, je n'ai qu'une bande blanche (cf capture), donc je ne sais pas si mes boutons peuvent marcher :/

[Invité]

Re, ben ,
c'est bien mais comme on n'a pas d'information,
je ne peux pas te venir en aide .

a++

[chrisfra]

Que te faut-il comme information exactement ?

[Invité]

Hello Christa,
hum, mettre à jour ton profil afin que l'on puisse accéder à ton forum,
et donner le template dans sa totalité.

As tu ajouté la c.s.s?
As tu bien modifié ton template ?
C'est terrible de devoir demander..............................


a++

[chrisfra]

Pour le code j'ai tout bien mis oui, ça je sais bien le faire, pourtant ça ne s'affiche pas comme prévu :/

Voici le index_box dans sa totalité :

Code:


 <div class="star-pa">
    <div class="section-staff">
        <div class="deimos">
            <div class="deimosDesc">
                <div class="pseudoDeimos">Deimos</div>
                <div class="gradeDeimos">Fondateur / Graphiste</div>
                <div class="link-profilDeimos">Profil • Mp</div>
            </div>
            <img src="http://image.noelshack.com/fichiers/2019/04/7/1548597873-c.png" alt="Deimos" height="80px" width="200px"/>
        </div>
       
        <div class="encke">
            <div class="enckeDesc">
                <div class="pseudoEncke">Encke</div>
                <div class="gradeEncke">Admin / Codeur</div>
                <div class="link-profilEncke">Profil • Mp</div>
            </div>
            <img src="http://image.noelshack.com/fichiers/2019/04/7/1548597872-enckepage.jpg" alt="Encke" height="80px" width="200px"/>
        </div>

        <div class="cain">
            <div class="cainDesc">
                <div class="pseudoCain">Cain</div>
                <div class="gradeCain">Admin</div>
                <div class="link-profilCain">Profil • Mp</div>
            </div>
            <img src="http://image.noelshack.com/fichiers/2019/04/7/1548597873-cain.jpg" alt="Cain" height="80px" width="200px"/>
        </div>
    </div>
   
    <div class="section-news-tops">
        <div class="block-news">
            <div class="title-news">NEWS</div>
            <div class="border-news1"></div>
            <div class="border-news2"></div>
            <div class="contenu-news">Les coccinelles sont des coléoptères. On a tendance à penser que les tâches sur leur dos indiquent leur âge mais ce n'est rien de plus qu'une croyance populaire. En effet, ces tâches représentent la race de la coccinelle. C'est un critère d'identification.</div>
            <div class="border-news3"></div>
            <div class="border-news4"></div>
            <div class="border-news5"></div>
        </div>
       
        <div class="tops_sites">
            <div class="title-tops">TOPS SITES</div>
            <div class="tops">
                <img src="http://image.noelshack.com/fichiers/2019/04/7/1548597923-top1.png" alt="top site"/>
                <img src="http://image.noelshack.com/fichiers/2019/04/7/1548597923-top2.png" alt="top site"/>
                <img src="http://image.noelshack.com/fichiers/2019/04/7/1548597923-top3.png" alt="top site"/>
            </div>
        </div>
    </div>
   
    <div class="section-contexte">
        <div class="block-contexte">
            <div class="title-contexte">CONTEXTE</div>
            <div class="border-contexte1"></div>
            <div class="border-contexte2"></div>
            <div class="contenu-contexte">Les coccinelles sont des coléoptères. On a tendance à penser que les tâches sur leur dos indiquent leur âge mais ce n'est rien de plus qu'une croyance populaire. En effet, ces tâches représentent la race de la coccinelle. C'est un critère d'identification.</div>
            <div class="border-contexte3"></div>
            <div class="border-contexte4"></div>
            <div class="border-contexte5"></div>
        </div>
       
        <div class="predefs">
            <iframe src="http://testazalpher.forumactif.com/h2-test" style="width: 340px;"></iframe>
        </div>
       
        <div class="tops_parto">
            <div class="title-tops-parto">TOPS PARTO</div>
            <div class="tops-partenariat">
                <img src="http://image.noelshack.com/fichiers/2019/04/7/1548597923-top.png" alt="top site"/>
                <img src="http://image.noelshack.com/fichiers/2019/04/7/1548597923-top.png" alt="top site"/>
                <img src="http://image.noelshack.com/fichiers/2019/04/7/1548597923-top.png" alt="top site"/>
                <img src="http://image.noelshack.com/fichiers/2019/04/7/1548597923-top.png" alt="top site"/>
                <img src="http://image.noelshack.com/fichiers/2019/04/7/1548597923-top.png" alt="top site"/>
            </div>
        </div>
    </div>
</div>

<br/>

<div class="nav-bar2">
     <input type="image" id="image" value="afficher" onclick="masquer_div('a_masquer');" alt="Bouton General" width="140px" src="http://image.noelshack.com/fichiers/2019/04/7/1548600095-nav-general.png"/>
        <input type="image" id="image" value="afficher" onclick="masquer_div('a_masquer');" alt="Bouton General" width="140px" src="http://image.noelshack.com/fichiers/2019/04/7/1548600095-nav-perso.png"/>
     <!--<img src="http://image.noelshack.com/fichiers/2019/04/7/1548600095-nav-general.png" alt="Bouton General" width="140px"/>
        <img src="http://image.noelshack.com/fichiers/2019/04/7/1548600095-nav-perso.png" alt="Bouton Perso" width="140px"/>-->
        <img src="http://image.noelshack.com/fichiers/2019/04/7/1548600095-nav-rp.png" alt="Bouton RP" width="140px"/>
        <img src="http://image.noelshack.com/fichiers/2019/04/7/1548600095-nav-news.png" alt="Bouton News" width="140px"/>
        <img src="http://image.noelshack.com/fichiers/2019/04/7/1548600094-nav-flood.png" alt="Bouton Flood" width="140px"/>
        <img src="http://image.noelshack.com/fichiers/2019/04/7/1548600094-nav-archive.png" alt="Bouton Archive" width="140px"/>
</div>
<br/>
<ul class="linklist top">
   <!-- BEGIN switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
   </li>
   <li>
      <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
   </li>
   <!-- END switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
   </li>
   <!-- BEGIN switch_user_logged_in -->
      <li class="rightside">
         <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
      </li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- Container des onglets -->
<ul id="tab" class="tab_container"></ul>
<!-- Ajout des onglets-->
<script>
 jQuery(function($){
 $('.tab_container').append("{catrow.tablehead.L_FORUM}");
 $('#tab').html($('#tab').html().replace(/h2/g, 'li'));
 });
</script>
<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
<div class="forum_container">
 
      <div class="forabg" id="a_masquer">
         <div class="ls-forum">
                          <div class="title_categ">{catrow.tablehead.L_FORUM}</div>
                          <img src="http://image.noelshack.com/fichiers/2019/05/5/1549051729-titre-categorie-forum.png" height="100px"/>
         </div>
         <ul class="topiclist forums">
   <!-- END tablehead -->
                         


   <!-- BEGIN forumrow -->
            <li class="row">
                                 
                                  <div class="categ1">
                                      <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="60px"/>
                                     
                                      <div class="center-categ">
                                          <div class="title-categorie">
                                              <div class="title">
                                                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                                              </div>
                                          </div>
                                          <div class="desc-categorie">
                                              <div class="description">
                                                  {catrow.forumrow.FORUM_DESC}
                                              </div>
                                          </div>
                                      </div>
                                     
                                      <div class="right-categ">
                                          <div class="block-info-dernier-message">
                                              <div class="titre-info-dm"><a href="{catrow.forumrow.ads.LINK}"><a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a></a></div>
                                              <!--<div class="date-info-dm"> &nbsp; &nbsp;</div>-->
                                              <div class="pseudo-info-dm">{catrow.forumrow.USER_LAST_POST}</div>
                                          </div>
                                      </div>
                                  </div>
                                 
            </li>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </ul>
      </div>
  </div>
   <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
   <li>
      <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
   </li>
   <li>
      <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
   </li>
   <li class="last">
      <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
   </li>
   <!-- BEGIN switch_delete_cookies -->
      <li class="rightside">
         <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
      </li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->
<script>
function masquer_div(id)
{
  if (document.getElementById(id).style.display == 'none')
  {
      document.getElementById(id).style.display = 'block';
  }
  else
  {
      document.getElementById(id).style.display = 'none';
  }
}
</script>

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
   var btn_collapse = $('<div></div>', {
      class: 'btn-collapse'
   });

   var btn_collapse_show = $('<i></i>', {
      class: 'ion-android-add-circle hidden',
      'data-tooltip': '{L_EXPEND_CAT}'
   }).appendTo(btn_collapse);

   var btn_collapse_hide = $('<i></i>', {
      class: 'ion-android-remove-circle',
      'data-tooltip': '{L_HIDE_CAT}'
   }).appendTo(btn_collapse);

   var collapsed = [];

   if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
      collapsed = readCookie('collapsed').split(',');
   }

   $(document).on('click', '.btn-collapse', function() {
      $(this).children('.ion-android-add-circle').toggleClass('hidden');
      $(this).children('.ion-android-remove-circle').toggleClass('hidden');
      $(this).parents('.forabg').toggleClass('hidden');

      if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
         collapsed = readCookie('collapsed').split(',');
      }

      if (!$(this).parents('.forabg').hasClass('hidden')) {
         removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

         createCookie('collapsed', collapsed);
      } else {
         collapsed.push('' + $(this).parents('.forabg').data('cindex'));

         createCookie('collapsed', collapsed);
      }
   });

   $('.forabg').each(function(i) {
      $(this).data('cindex', '' + i);

      $(btn_collapse)
         .clone()
         .attr('id', 'forabg' + i)
         .appendTo($(this).find('.header'));

      if ($.inArray('' + i, collapsed) > -1) {
         $(this).toggleClass('hidden');
         $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
         $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
      }
   });
});

function removeFromArray(item, array) {
   var i = array.indexOf(item);

   if (i > -1) {
      array = array.splice(i, 1);
   }
}

function createCookie(name, value, days) {
   var expires;

   if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toGMTString();
   } else {
      expires = "";
   }
   document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
   var nameEQ = encodeURIComponent(name) + "=";
   var ca = document.cookie.split(';');
   for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
   }
   return null;
}
//]]>
</script>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
  $(function(){
      setInterval(function(){
        $(".slideshow ul").animate({marginLeft:-235},800,function(){
            $(this).css({marginLeft:0}).find("li:last").after($(this).find("li:first"));
        })
      }, 3500);
  });
</script>
<script>
 jQuery(function($){
 $('.forum_container').each(function(index){
 $(this).attr('id', 'c'+(index+1));
 });


 $('#tab li').each(function(index){
 $(this).addClass('tabs');
 $(this).contents().wrap('<a href="#c'+(index+1)+'" title="'+$(this).html()+'"></a>');

 if(!sessionStorage.getItem('active-cat') || $(sessionStorage.getItem('active-cat')).length != 0){
 $('#tab li').eq(0).addClass('active');
 $('#c1').show();
 }else{
 $('a[href="'+sessionStorage.getItem('active-cat')+'"]').closest('li').addClass('active');
 $(sessionStorage.getItem('active-cat')).show();
 }


 $(this).find('a').click(function(event){
 event.preventDefault();
 var target = $(this).attr('href');
 sessionStorage.setItem('active-cat', target);
 $(this).parent().siblings('.tabs').removeClass('active');
 $(this).parent().addClass('active');
 $(target).show().siblings('.forum_container').hide();
 });
 });

 if(location.pathname != '/'){
 $('#tab').remove();
 };
 });
</script>
<style>.forum_container{ display: none; } #tab li{ list-style: none; }</style>


[Invité]

Hello chrisfra,.
il vaut mieux repartir du bon pied et refaire tout le codage une fois que le template sera en fonction.
Actuellement, c'est infaisable.


a++

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 8 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.