Forums Développement Multimédia

Aller au contenu

Ouvrir un accordion à un endroit spécifique en fonction de l'adresse de la page.

CODE

1 réponse à ce sujet

#1 Waldos

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 72 messages

Posté 11 September 2019 - 11:43 AM

Bonjour,

J'ai récupéré le code d'un petit accordion assez simple, mais je n'arrive pas à trouver le code pour ouvrir celui-ci à un onglet différent en fonction du nom de la page dans la barre d'adresse.

un truc du genre:


Event.observe(window, 'load', loadAccordions, false);


  function loadAccordions() {
if( location.href=='https://www.raoul-douglas.com\/temporaire\/php\/tests\/accordion-8.php'){
alors je déploie la deuxième section de mon accordion.
}
}
 

Voici le code de la page de mon accordion :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans titre</title>
<style>
li, ul {
list-style: none
}
.myNav { width:200px; background-color: #f7f3c6; border:2px solid #666666;}
.myNav-item:not(:first-child) { border-top:1px solid #4d4d4d;background-color: #f7f3c6; }
.myNav-link { display:block; padding:8px 10px;background-color: #f7f3c6; }
.myNav-content { padding:0 20px; padding-bottom:8px;background-color: #f7f3c6; }
.ui-accordion-content { display:none; }
.active > .ui-accordion-content { display:block; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/temporaire/php/tests/accordion-8.js"></script>
<script>
$(document).ready(function() {
  $('.myNav').simpleAccordion();
  $('.myNav2').simpleAccordion();})
</script>
</head>
<body>
<table><tr><td>
<table><tr><td>

<ul class="myNav" id="myNav">
<li class="myNav-item ui-accordion-item" id="conteneur">
  <a class="myNav-link ui-accordion-trigger" href="#">Category 1</a>
  <ul class="myNav-content ui-accordion-content">
   <li><a href="#">Category 1-1</a></li>
   <li><a href="#">Category 1-2</a></li>
   <li><a href="#">Category 1-3</a></li>
  </ul>
</li>
 
<li id="testli" class="myNav-item ui-accordion-item" id="conteneur">
  <a id="testa" class="myNav-link ui-accordion-trigger" href="#">Category 2</a>
  <ul class="myNav-content ui-accordion-content">
   <li><a href="#">Category 1-1</a></li>
   <li><a href="#">Category 1-2</a></li>
   <li><a href="#">Category 1-3</a></li>
  </ul>
</li>
 
        <li class="myNav-item ui-accordion-item">
  <a class="myNav-link ui-accordion-trigger" href="#">Category 3</a>
  <ul class="myNav-content ui-accordion-content">
 
                        <li class="myNav-item ui-accordion-item">
  <a class="myNav-link ui-accordion-trigger" href="#">sous categorie 1</a>
  <ul class="myNav-content ui-accordion-content">
   <li><a href="#">Category 1-1</a></li>
   <li><a href="#">Category 1-2</a></li>
   <li><a href="#">Category 1-3</a></li>
  </ul>
</li>
 
   <li><a href="#">Category 1-2</a></li>
   <li><a href="#">Category 1-3</a></li>
  </ul>
</li>
 
</ul>
</td>
<td width="100"></td>
<td>
<table><tr><td>
<ul class="myNav2">
<li class="myNav-item ui-accordion-item">
  <a class="myNav-link ui-accordion-trigger" href="#">Category 1</a>
  <ul class="myNav-content ui-accordion-content">
   <li><a href="#">Category 1-1</a></li>
   <li><a href="#">Category 1-2</a></li>
   <li><a href="#">Category 1-3</a></li>
  </ul>
</li>
 
<li class="myNav-item ui-accordion-item">
  <a class="myNav-link ui-accordion-trigger" id="cat2" href="#">Category 2</a>
  <ul class="myNav-content ui-accordion-content">
   <li><a href="#">Category 1-1</a></li>
   <li><a href="#">Category 1-2</a></li>
   <li><a href="#">Category 1-3</a></li>
  </ul>
</li>
 
        <li class="myNav-item ui-accordion-item">
  <a class="myNav-link ui-accordion-trigger" href="#">Category 3</a>
  <ul class="myNav-content ui-accordion-content">
 
                        <li class="myNav-item ui-accordion-item">
  <a class="myNav-link ui-accordion-trigger" href="#">sous categorie 1</a>
  <ul class="myNav-content ui-accordion-content">
   <li><a href="#">Category 1-1</a></li>
   <li><a href="#">Category 1-2</a></li>
   <li><a href="#">Category 1-3</a></li>
  </ul>
</li>
 
   <li><a href="#">Category 1-2</a></li>
   <li><a href="#">Category 1-3</a></li>
  </ul>
</li>
 
</ul>
</td></tr></table>
</td></tr></table>
</body>
</html>
 

et celui du JS qui va avec :


(function($) {
   $.fn.simpleAccordion = function(options) {
          var opts = $.extend({
                        'item': '.ui-accordion-item',
                        'trigger': '.ui-accordion-trigger',
                        'content': '.ui-accordion-content',
                        'active': 'active',
                        'autoClose': false,
                        'multiOpen': false,
                        'speed': 300
                  }, options);
       
          /*** [Function] Check if item is opened ***/
          var isOpen = function($item) {
                 return $item.hasClass(opts.active) ? true : false;
          };
          /*** [Function] Close accordion item ***/
          var close = function($item) {
                 $item
                        .find(opts.content).eq(0)
                        .slideUp(opts.speed, function() {
                        $item.removeClass(opts.active);
                 });
          };
          /*** [Function] Open accordion item ***/
          var open = function($item) {
                 if( !opts.multiOpen ) {
                        var $itemActive = $item.siblings('.' + opts.active);
                        close($itemActive);
                 }
                 var $content = $item.find(opts.content).eq(0);
                 $content.hide();
                 $item.addClass(opts.active);
                 $content.slideDown(opts.speed);
          };
          /*** Init accordion ***/
          return this.each(function(){
                 var $this = $(this),
                         single = $this.find( opts.item ).length ? false : true;
                 $this.find(opts.trigger).on('click.simpleAccordion', function(e){
                        e.preventDefault();
                        var $item = single ? $this : $(this).closest(opts.item);
                        isOpen($item) ? close($item) : open($item);
                 });
                 if( opts.autoClose ) {
                        $(document).on('click', function(e){
                           if( $(e.target).closest($this).length === 0 ) {
                                  if(single && $this.hasClass(opts.active)) {
                                         close( $this );
                                  }
                                  else {
                                         $this.find(opts.item + '.' + opts.active).each(function () {
                                                close( $(this) );
                                         });
                                  }
                           }   
                        });
                 }
          });
   };
})(jQuery);
 


Merci d'avance !

#2 Waldos

    Ceinture Verte

  • Members
  • PipPipPipPip
  • 72 messages

Posté 11 September 2019 - 14:28 PM

Pardon, je voulais supprimer mon message, mais je n'ai pas trouvé l'option.

J'ai finalement fini par trouver. C'était tout bête, Il suffisait de commander un clic sur l'élément avec l'id voulu.


document.getElementById("id-de-l-element").click();
 

Vous pouvez fermer ce sujet.



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP