Accordéon vertical dans un simple message.

3 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Accordéon vertical dans un simple message.

Message par Karmixi Dim 6 Nov 2011 - 9:54

Bonjours à tous!

Comme le dit le titre, j'aimerais réaliser un accordéon vertical, voici lequel: http://jesuisunelegende.forumactif.com/t4-apercu-pa-qeel-en-accordeon-vertical-css3

J'ai lu tout les sujets concernant ses codes pour l'installer mais je n'ai pas réellement trouver ce que je cherchais, pourquoi? Et bien ce sont les codes pour l'installer dans une PA ou un QEEL et moi je voudrais simplement l'utiliser dans un message. Je m'explique plus en détail. Je suis membre d'un forum et n'ai donc pas accès au panneau d'administration. Comment l'utiliser sans avoir besoin d'aller dans le panneau d'administration? Juste en mettant des codes codes dans le message et le postant?

Merci d'avance :3


Dernière édition par Karmixi le Dim 13 Nov 2011 - 21:57, édité 3 fois
Karmixi

Karmixi
**

Messages : 52
Inscrit(e) le : 15/12/2010

http://paprikaschool.pro-forums.fr/
Karmixi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par missx Dim 6 Nov 2011 - 10:20

salut
Un menu déroulant utilise je javascript, et le javascript n'est pas autorisé dans les messages par mesure de sécurité.
Si le html est autorisé dans le forum en question , tu peut faire ton menu déroulant dans une page html personnelle et l'intégrer dans le message en iframe.
a+
missx

missx
Membre actif

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

missx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Karmixi Dim 6 Nov 2011 - 10:35

Merci beaucoup, mais à vrai dire, j'ai pas trop compris le système de l'iframe o_o"
Karmixi

Karmixi
**

Messages : 52
Inscrit(e) le : 15/12/2010

http://paprikaschool.pro-forums.fr/
Karmixi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par missx Dim 6 Nov 2011 - 10:47

En fait l'iframe est l'insertion d'une page html dans une autre ( là dans un message)
Mais je m'aperçoit que j'ai dis une bêtise, ça arrive le dimanche matin !! , il est possible faire un menu de ce type uniquement en css3 et html (donc sans javascript) , je recherche les codes et je te tiens au courant.
A+
missx

missx
Membre actif

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

missx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Karmixi Dim 6 Nov 2011 - 10:57

Merci j'attends de tes nouvelles ^^
Karmixi

Karmixi
**

Messages : 52
Inscrit(e) le : 15/12/2010

http://paprikaschool.pro-forums.fr/
Karmixi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par missx Dim 6 Nov 2011 - 14:10

re ,
J'ai préparé un petit tuto sur une page html :
tuto Accordeon vertical
A+ Very Happy
missx

missx
Membre actif

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

missx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Karmixi Dim 6 Nov 2011 - 18:53

Merci o/

Donc si j'ai bien compris, avec ton tuto j'en fait un iframe et c'est réglé? °° Parce que si c'est pas la cas, le problème reste le même vu que je n'ai pas accès au CSS du forum.
Karmixi

Karmixi
**

Messages : 52
Inscrit(e) le : 15/12/2010

http://paprikaschool.pro-forums.fr/
Karmixi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par missx Dim 6 Nov 2011 - 19:39

oui, tu met tout dans une page html , le css + le html puis tu le met en iframe comme ceci
Code:
<IFRAME src="LIEN DE LA PAGE HTML" width=700 height=500 scrolling=no frameborder=0> </IFRAME>
tu ajuste les dimensions et tu met le lien de la page hébergée.
Pour ta page html, elle doit avoir cette structure :
Code:
<!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>titre</title>
<style type="text/css">
<!--ICI TU MET LE CSS -->
</style>
</head>

<body>
<!--ICI TU MET LE HTML -->
</body>
</html>
a+ Very Happy
missx

missx
Membre actif

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

missx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Karmixi Dim 6 Nov 2011 - 20:16

D'accord, merci infiniment. ♥
Par contre je vais t'embêter une dernière fois désolée ><
J'aimerais que les titre soient cliquables pour qu'ils se déroulent ensuite et non qu'ils se déroulent au passage de la souris D8 Une solution? Merci Very Happy
Karmixi

Karmixi
**

Messages : 52
Inscrit(e) le : 15/12/2010

http://paprikaschool.pro-forums.fr/
Karmixi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par missx Lun 7 Nov 2011 - 11:44

dans ce cas il faut du javascript.
Tu peut faire ce genre d'accordeon sur une page html et ensuite inserée en iframe.
Voici une page complète avec le html, le javascript et le css, tu adapte selon tes couleurs et ton contenu
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
//** Accordion Content script: By Dynamic Drive, at http://www.dynamicdrive.com
//** Created: Jan 7th, 08'. Last updated: June 7th, 2010 to v1.9

//Version 1.9: June 7th, 2010':
//**1) Ajax content support added, so a given header's content can be dynamically fetched from an external file and on demand.
//**2) Optimized script performance by caching header and content container references


var ddaccordion={
   ajaxloadingmsg: '<img src="loading2.gif" /><br />Loading Content...', //customize HTML to output while Ajax content is being fetched (if applicable)

   headergroup: {}, //object to store corresponding header group based on headerclass value
   contentgroup: {}, //object to store corresponding content group based on headerclass value

   preloadimages:function($images){
      $images.each(function(){
         var preloadimage=new Image()
         preloadimage.src=this.src
      })
   },

   expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header
      this.toggleone(headerclass, selected, "expand")
   },

   collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header
      this.toggleone(headerclass, selected, "collapse")
   },

   expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname
      var $headers=this.headergroup[headerclass]
      this.contentgroup[headerclass].filter(':hidden').each(function(){
         $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
      })
   },

   collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname
      var $headers=this.headergroup[headerclass]
      this.contentgroup[headerclass].filter(':visible').each(function(){
         $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
      })
   },

   toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header
      var $targetHeader=this.headergroup[headerclass].eq(selected)
      var $subcontent=this.contentgroup[headerclass].eq(selected)
      if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible"))
         $targetHeader.trigger("evt_accordion")
   },

   ajaxloadcontent:function($targetHeader, $targetContent, config, callback){
      var ajaxinfo=$targetHeader.data('ajaxinfo')

      function handlecontent(content){ //nested function
         if (content){ //if ajax content has loaded
            ajaxinfo.cacheddata=content //remember ajax content
            ajaxinfo.status="cached" //set ajax status to cached
            if ($targetContent.queue("fx").length==0){ //if this content isn't currently expanding or collapsing
               $targetContent.hide().html(content) //hide loading message, then set sub content's HTML to ajax content
               ajaxinfo.status="complete" //set ajax status to complete
               callback() //execute callback function- expand this sub content
            }
         }
         if (ajaxinfo.status!="complete"){
            setTimeout(function(){handlecontent(ajaxinfo.cacheddata)}, 100) //call handlecontent() again until ajax content has loaded (ajaxinfo.cacheddata contains data)
         }
      } //end nested function

      if (ajaxinfo.status=="none"){ //ajax data hasn't been fetched yet
         $targetContent.html(this.ajaxloadingmsg)
         $targetContent.slideDown(config.animatespeed)
         ajaxinfo.status="loading" //set ajax status to "loading"
         $.ajax({
            url: ajaxinfo.url, //path to external menu file
            error:function(ajaxrequest){
               handlecontent('Error fetching content. Server Response: '+ajaxrequest.responseText)
            },
            success:function(content){
               content=(content=="")? " " : content //if returned content is empty, set it to "space" is content no longer returns false/empty (hasn't loaded yet)
               handlecontent(content)
            }
         })
      }
      else if (ajaxinfo.status=="loading")
         handlecontent(ajaxinfo.cacheddata)
   },

   expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation){
      var ajaxinfo=$targetHeader.data('ajaxinfo')
      if (ajaxinfo){ //if this content should be fetched via Ajax
         if (ajaxinfo.status=="none" || ajaxinfo.status=="loading")
            this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)})
         else if (ajaxinfo.status=="cached"){
            $targetContent.html(ajaxinfo.cacheddata)
            ajaxinfo.cacheddata=null
            ajaxinfo.status="complete"
         }
      }
      this.transformHeader($targetHeader, config, "expand")
      $targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){
         config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)
         if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header
            var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)
            if (targetLink) //if this header is a link
               setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
         }
      })
   },

   collapseit:function($targetHeader, $targetContent, config, isuseractivated){
      this.transformHeader($targetHeader, config, "collapse")
      $targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)})
   },

   transformHeader:function($targetHeader, config, state){
      $targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes
      .removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand)
      if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)?
         $targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header
         $targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image
      }
      else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it
         $targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
      else if (config.htmlsetting.location=="suffix")
         $targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
   },

   urlparamselect:function(headerclass){
      var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL
      if (result!=null)
         result=RegExp.$1.split(',')
      return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices
   },

   getCookie:function(Name){
      var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
      if (document·cookie.match(re)) //if cookie found
         return document·cookie.match(re)[0].split("=")[1] //return its value
      return null
   },

   setCookie:function(name, value){
      document·cookie = name + "=" + value + "; path=/"
   },

   init:function(config){
   document.write('<style type="text/css">\n')
   document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
   document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link
   document.write('<\/style>')
   jQuery(document).ready(function($){
      ddaccordion.urlparamselect(config.headerclass)
      var persistedheaders=ddaccordion.getCookie(config.headerclass)
      ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //remember header group for this accordion
      ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //remember content group for this accordion
      var $headers=ddaccordion.headergroup[config.headerclass]
      var $subcontents=ddaccordion.contentgroup[config.headerclass]
      config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties
      config.revealtype=config.revealtype || "click"
      config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter")
      if (config.revealtype=="clickgo"){
         config.postreveal="gotourl" //remember added action
         config.revealtype="click" //overwrite revealtype to "click" keyword
      }
      if (typeof config.togglehtml=="undefined")
         config.htmlsetting={location: "none"}
      else
         config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties
      config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
      config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler
      var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects)
      var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded)
      if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array)
         expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3]
      if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded
         expandedindices=[]
      if (config["collapseprev"] && expandedindices.length>1) //only allow one content open?
         expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray())
      if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header
         expandedindices=[0]
      $headers.each(function(index){ //loop through all headers
         var $header=$(this)
         if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag
            $('<span class="accordprefix"></span>').prependTo(this)
            $('<span class="accordsuffix"></span>').appendTo(this)
         }
         $header.attr('headerindex', index+'h') //store position of this header relative to its peers
         $subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers
         var $subcontent=$subcontents.eq(index)
         var $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //see if this content should be loaded via ajax
         if ($hiddenajaxlink.length==1){
            $header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header
         }
         var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type
         if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first)
            ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) //3rd last param sets 'isuseractivated' parameter, 2nd last sets isdirectclick, last sets skipanimation param
            lastexpanded={$header:$header, $content:$subcontent}
         }  //end check
         else{
            $subcontent.hide()
            config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
            ddaccordion.transformHeader($header, config, "collapse")
         }
      })
      $headers.bind("evt_accordion", function(e, isdirectclick){ //assign CUSTOM event handler that expands/ contacts a header
            var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
            if ($subcontent.css('display')=="none"){
               ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick) //2nd last param sets 'isuseractivated' parameter
               if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content?
                  ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter
               }
               lastexpanded={$header:$(this), $content:$subcontent}
            }
            else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){
               ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
            }
       })
      $headers.bind(config.revealtype, function(){
         if (config.revealtype=="mouseenter"){
            clearTimeout(config.revealdelay)
            var headerindex=parseInt($(this).attr("headerindex"))
            config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
         }
         else{
            $(this).trigger("evt_accordion", [true]) //last parameter indicates this is a direct click on the header
            return false //cancel default click behavior
         }
      })
      $headers.bind("mouseleave", function(){
         clearTimeout(config.revealdelay)
      })
      config.oninit($headers.get(), expandedindices)
      $(window).bind('unload', function(){ //clean up and persist on page unload
         $headers.unbind()
         var expandedindices=[]
         $subcontents.filter(':visible').each(function(index){ //get indices of expanded headers
            expandedindices.push($(this).attr('contentindex'))
         })
         if (config.persiststate==false && $headers.length>0){ //persist state?
            expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
            ddaccordion.setCookie(config.headerclass, expandedindices)
         }
      })
   })
   }
}

//preload any images defined inside ajaxloadingmsg variable
ddaccordion.preloadimages(jQuery(ddaccordion.ajaxloadingmsg).filter('img'))

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<script type="text/javascript">


ddaccordion.init({
   headerclass: "silverheader", //Shared CSS class name of headers group
   contentclass: "submenu", //Shared CSS class name of contents group
   revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
   mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
   collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
   defaultexpanded: [12], //index of content(s) open by default [index1, index2, etc] [] denotes no content
   onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
   animatedefault: true, //Should contents open by default be animated into view?
   persiststate: false, //persist state of opened contents within browser session?
   toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
   togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
   animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
   oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
      //do nothing
   },
   onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
      //do nothing
   }
})


</script>


<style type="text/css">

.applemenu{
   margin: 5px 0;
   padding: 0;
   width: 500px; /*largeur de l'acordeon*/
   border: 1px solid #9A9A9A;
   color: #000;
   background-color: #0F6;
   font-weight: bold;
   background-color: #999;
   border-top-width: medium;
   border-right-width: 1;
   border-bottom-width: 1;
   border-left-width: 1;
   border-top-style: dashed;
   border-right-style: dashed;
   border-bottom-style: dashed;
   border-left-style: dashed;
   border-top-color: #030;
   border-right-color: #030;
   border-bottom-color: #030;
   border-left-color: #030;
   height: auto;
}


.silverheader{
   color: white;
   background-color: #096;
   border-top-width: medium;
   border-right-width: 1;
   border-bottom-width: 1;
   border-left-width: 1;
   border-top-style: dashed;
   border-right-style: dashed;
   border-bottom-style: dashed;
   border-left-style: dashed;
   border-top-color: #030;
   border-right-color: #030;
   border-bottom-color: #030;
   border-left-color: #030;
   text-align: center;
}
.silverheader:hover{
   background-color: #CF6;
   color: #CCC;
   cursor: help;
}


.applemenu div.submenu{ /*contenu*/
   background: white;
   padding: 5px;
   height: 300px; /*hauteur de la div*/
   color: #000;
   font-weight: normal;
}

</style>

</head>

<body>

<div class="applemenu">
<div class="silverheader">Titre 1</div>
   <div class="submenu">
   Contenu du titre 1<br />
   </div>
<div class="silverheader">Titre 2</div>
   <div class="submenu">
   Contenu du titre 2<br />
   </div>
<div class="silverheader">Titre 3</div>
   <div class="submenu">
   Contenu du titre 3<br />
   </div>
<div class="silverheader">Titre 4</div>
   <div class="submenu">
   Contenu du titre 4<br />

   </div>
<div class="silverheader">Titre 5</div>
   <div class="submenu">
   Contenu du titre 5<br />
   </div>
  <br />
</div>
</body>
</html>
A+ Very Happy
missx

missx
Membre actif

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

missx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Karmixi Lun 7 Nov 2011 - 19:35

Merci beaucoup *-*
Karmixi

Karmixi
**

Messages : 52
Inscrit(e) le : 15/12/2010

http://paprikaschool.pro-forums.fr/
Karmixi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Karmixi Lun 7 Nov 2011 - 20:23

Désolée du double poste mais je viens d'essayer mais quand je clique, le contenue du texte ne se ré-enroule pas D8 éè
Karmixi

Karmixi
**

Messages : 52
Inscrit(e) le : 15/12/2010

http://paprikaschool.pro-forums.fr/
Karmixi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par missx Mar 8 Nov 2011 - 8:10

OK, voilà le code de la page complète avec un bouton pour refermer le menu :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
//** Accordion Content script: By Dynamic Drive, at http://www.dynamicdrive.com
//** Created: Jan 7th, 08'. Last updated: June 7th, 2010 to v1.9

//Version 1.9: June 7th, 2010':
//**1) Ajax content support added, so a given header's content can be dynamically fetched from an external file and on demand.
//**2) Optimized script performance by caching header and content container references


var ddaccordion={
   ajaxloadingmsg: '<img src="loading2.gif" /><br />Loading Content...', //customize HTML to output while Ajax content is being fetched (if applicable)

   headergroup: {}, //object to store corresponding header group based on headerclass value
   contentgroup: {}, //object to store corresponding content group based on headerclass value

   preloadimages:function($images){
      $images.each(function(){
         var preloadimage=new Image()
         preloadimage.src=this.src
      })
   },

   expandone:function(headerclass, selected){ //PUBLIC function to expand a particular header
      this.toggleone(headerclass, selected, "expand")
   },

   collapseone:function(headerclass, selected){ //PUBLIC function to collapse a particular header
      this.toggleone(headerclass, selected, "collapse")
   },

   expandall:function(headerclass){ //PUBLIC function to expand all headers based on their shared CSS classname
      var $headers=this.headergroup[headerclass]
      this.contentgroup[headerclass].filter(':hidden').each(function(){
         $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
      })
   },

   collapseall:function(headerclass){ //PUBLIC function to collapse all headers based on their shared CSS classname
      var $headers=this.headergroup[headerclass]
      this.contentgroup[headerclass].filter(':visible').each(function(){
         $headers.eq(parseInt($(this).attr('contentindex'))).trigger("evt_accordion")
      })
   },

   toggleone:function(headerclass, selected, optstate){ //PUBLIC function to expand/ collapse a particular header
      var $targetHeader=this.headergroup[headerclass].eq(selected)
      var $subcontent=this.contentgroup[headerclass].eq(selected)
      if (typeof optstate=="undefined" || optstate=="expand" && $subcontent.is(":hidden") || optstate=="collapse" && $subcontent.is(":visible"))
         $targetHeader.trigger("evt_accordion")
   },

   ajaxloadcontent:function($targetHeader, $targetContent, config, callback){
      var ajaxinfo=$targetHeader.data('ajaxinfo')

      function handlecontent(content){ //nested function
         if (content){ //if ajax content has loaded
            ajaxinfo.cacheddata=content //remember ajax content
            ajaxinfo.status="cached" //set ajax status to cached
            if ($targetContent.queue("fx").length==0){ //if this content isn't currently expanding or collapsing
               $targetContent.hide().html(content) //hide loading message, then set sub content's HTML to ajax content
               ajaxinfo.status="complete" //set ajax status to complete
               callback() //execute callback function- expand this sub content
            }
         }
         if (ajaxinfo.status!="complete"){
            setTimeout(function(){handlecontent(ajaxinfo.cacheddata)}, 100) //call handlecontent() again until ajax content has loaded (ajaxinfo.cacheddata contains data)
         }
      } //end nested function

      if (ajaxinfo.status=="none"){ //ajax data hasn't been fetched yet
         $targetContent.html(this.ajaxloadingmsg)
         $targetContent.slideDown(config.animatespeed)
         ajaxinfo.status="loading" //set ajax status to "loading"
         $.ajax({
            url: ajaxinfo.url, //path to external menu file
            error:function(ajaxrequest){
               handlecontent('Error fetching content. Server Response: '+ajaxrequest.responseText)
            },
            success:function(content){
               content=(content=="")? " " : content //if returned content is empty, set it to "space" is content no longer returns false/empty (hasn't loaded yet)
               handlecontent(content)
            }
         })
      }
      else if (ajaxinfo.status=="loading")
         handlecontent(ajaxinfo.cacheddata)
   },

   expandit:function($targetHeader, $targetContent, config, useractivated, directclick, skipanimation){
      var ajaxinfo=$targetHeader.data('ajaxinfo')
      if (ajaxinfo){ //if this content should be fetched via Ajax
         if (ajaxinfo.status=="none" || ajaxinfo.status=="loading")
            this.ajaxloadcontent($targetHeader, $targetContent, config, function(){ddaccordion.expandit($targetHeader, $targetContent, config, useractivated, directclick)})
         else if (ajaxinfo.status=="cached"){
            $targetContent.html(ajaxinfo.cacheddata)
            ajaxinfo.cacheddata=null
            ajaxinfo.status="complete"
         }
      }
      this.transformHeader($targetHeader, config, "expand")
      $targetContent.slideDown(skipanimation? 0 : config.animatespeed, function(){
         config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), useractivated)
         if (config.postreveal=="gotourl" && directclick){ //if revealtype is "Go to Header URL upon click", and this is a direct click on the header
            var targetLink=($targetHeader.is("a"))? $targetHeader.get(0) : $targetHeader.find('a:eq(0)').get(0)
            if (targetLink) //if this header is a link
               setTimeout(function(){location=targetLink.href}, 200) //ignore link target, as window.open(targetLink, targetLink.target) doesn't work in FF if popup blocker enabled
         }
      })
   },

   collapseit:function($targetHeader, $targetContent, config, isuseractivated){
      this.transformHeader($targetHeader, config, "collapse")
      $targetContent.slideUp(config.animatespeed, function(){config.onopenclose($targetHeader.get(0), parseInt($targetHeader.attr('headerindex')), $targetContent.css('display'), isuseractivated)})
   },

   transformHeader:function($targetHeader, config, state){
      $targetHeader.addClass((state=="expand")? config.cssclass.expand : config.cssclass.collapse) //alternate btw "expand" and "collapse" CSS classes
      .removeClass((state=="expand")? config.cssclass.collapse : config.cssclass.expand)
      if (config.htmlsetting.location=='src'){ //Change header image (assuming header is an image)?
         $targetHeader=($targetHeader.is("img"))? $targetHeader : $targetHeader.find('img').eq(0) //Set target to either header itself, or first image within header
         $targetHeader.attr('src', (state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse) //change header image
      }
      else if (config.htmlsetting.location=="prefix") //if change "prefix" HTML, locate dynamically added ".accordprefix" span tag and change it
         $targetHeader.find('.accordprefix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
      else if (config.htmlsetting.location=="suffix")
         $targetHeader.find('.accordsuffix').html((state=="expand")? config.htmlsetting.expand : config.htmlsetting.collapse)
   },

   urlparamselect:function(headerclass){
      var result=window.location.search.match(new RegExp(headerclass+"=((\\d+)(,(\\d+))*)", "i")) //check for "?headerclass=2,3,4" in URL
      if (result!=null)
         result=RegExp.$1.split(',')
      return result //returns null, [index], or [index1,index2,etc], where index are the desired selected header indices
   },

   getCookie:function(Name){
      var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
      if (document·cookie.match(re)) //if cookie found
         return document·cookie.match(re)[0].split("=")[1] //return its value
      return null
   },

   setCookie:function(name, value){
      document·cookie = name + "=" + value + "; path=/"
   },

   init:function(config){
   document.write('<style type="text/css">\n')
   document.write('.'+config.contentclass+'{display: none}\n') //generate CSS to hide contents
   document.write('a.hiddenajaxlink{display: none}\n') //CSS class to hide ajax link
   document.write('<\/style>')
   jQuery(document).ready(function($){
      ddaccordion.urlparamselect(config.headerclass)
      var persistedheaders=ddaccordion.getCookie(config.headerclass)
      ddaccordion.headergroup[config.headerclass]=$('.'+config.headerclass) //remember header group for this accordion
      ddaccordion.contentgroup[config.headerclass]=$('.'+config.contentclass) //remember content group for this accordion
      var $headers=ddaccordion.headergroup[config.headerclass]
      var $subcontents=ddaccordion.contentgroup[config.headerclass]
      config.cssclass={collapse: config.toggleclass[0], expand: config.toggleclass[1]} //store expand and contract CSS classes as object properties
      config.revealtype=config.revealtype || "click"
      config.revealtype=config.revealtype.replace(/mouseover/i, "mouseenter")
      if (config.revealtype=="clickgo"){
         config.postreveal="gotourl" //remember added action
         config.revealtype="click" //overwrite revealtype to "click" keyword
      }
      if (typeof config.togglehtml=="undefined")
         config.htmlsetting={location: "none"}
      else
         config.htmlsetting={location: config.togglehtml[0], collapse: config.togglehtml[1], expand: config.togglehtml[2]} //store HTML settings as object properties
      config.oninit=(typeof config.oninit=="undefined")? function(){} : config.oninit //attach custom "oninit" event handler
      config.onopenclose=(typeof config.onopenclose=="undefined")? function(){} : config.onopenclose //attach custom "onopenclose" event handler
      var lastexpanded={} //object to hold reference to last expanded header and content (jquery objects)
      var expandedindices=ddaccordion.urlparamselect(config.headerclass) || ((config.persiststate && persistedheaders!=null)? persistedheaders : config.defaultexpanded)
      if (typeof expandedindices=='string') //test for string value (exception is config.defaultexpanded, which is an array)
         expandedindices=expandedindices.replace(/c/ig, '').split(',') //transform string value to an array (ie: "c1,c2,c3" becomes [1,2,3]
      if (expandedindices.length==1 && expandedindices[0]=="-1") //check for expandedindices value of [-1], indicating persistence is on and no content expanded
         expandedindices=[]
      if (config["collapseprev"] && expandedindices.length>1) //only allow one content open?
         expandedindices=[expandedindices.pop()] //return last array element as an array (for sake of jQuery.inArray())
      if (config["onemustopen"] && expandedindices.length==0) //if at least one content should be open at all times and none are, open 1st header
         expandedindices=[0]
      $headers.each(function(index){ //loop through all headers
         var $header=$(this)
         if (/(prefix)|(suffix)/i.test(config.htmlsetting.location) && $header.html()!=""){ //add a SPAN element to header depending on user setting and if header is a container tag
            $('<span class="accordprefix"></span>').prependTo(this)
            $('<span class="accordsuffix"></span>').appendTo(this)
         }
         $header.attr('headerindex', index+'h') //store position of this header relative to its peers
         $subcontents.eq(index).attr('contentindex', index+'c') //store position of this content relative to its peers
         var $subcontent=$subcontents.eq(index)
         var $hiddenajaxlink=$subcontent.find('a.hiddenajaxlink:eq(0)') //see if this content should be loaded via ajax
         if ($hiddenajaxlink.length==1){
            $header.data('ajaxinfo', {url:$hiddenajaxlink.attr('href'), cacheddata:null, status:'none'}) //store info about this ajax content inside header
         }
         var needle=(typeof expandedindices[0]=="number")? index : index+'' //check for data type within expandedindices array- index should match that type
         if (jQuery.inArray(needle, expandedindices)!=-1){ //check for headers that should be expanded automatically (convert index to string first)
            ddaccordion.expandit($header, $subcontent, config, false, false, !config.animatedefault) //3rd last param sets 'isuseractivated' parameter, 2nd last sets isdirectclick, last sets skipanimation param
            lastexpanded={$header:$header, $content:$subcontent}
         }  //end check
         else{
            $subcontent.hide()
            config.onopenclose($header.get(0), parseInt($header.attr('headerindex')), $subcontent.css('display'), false) //Last Boolean value sets 'isuseractivated' parameter
            ddaccordion.transformHeader($header, config, "collapse")
         }
      })
      $headers.bind("evt_accordion", function(e, isdirectclick){ //assign CUSTOM event handler that expands/ contacts a header
            var $subcontent=$subcontents.eq(parseInt($(this).attr('headerindex'))) //get subcontent that should be expanded/collapsed
            if ($subcontent.css('display')=="none"){
               ddaccordion.expandit($(this), $subcontent, config, true, isdirectclick) //2nd last param sets 'isuseractivated' parameter
               if (config["collapseprev"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){ //collapse previous content?
                  ddaccordion.collapseit(lastexpanded.$header, lastexpanded.$content, config, true) //Last Boolean value sets 'isuseractivated' parameter
               }
               lastexpanded={$header:$(this), $content:$subcontent}
            }
            else if (!config["onemustopen"] || config["onemustopen"] && lastexpanded.$header && $(this).get(0)!=lastexpanded.$header.get(0)){
               ddaccordion.collapseit($(this), $subcontent, config, true) //Last Boolean value sets 'isuseractivated' parameter
            }
       })
      $headers.bind(config.revealtype, function(){
         if (config.revealtype=="mouseenter"){
            clearTimeout(config.revealdelay)
            var headerindex=parseInt($(this).attr("headerindex"))
            config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
         }
         else{
            $(this).trigger("evt_accordion", [true]) //last parameter indicates this is a direct click on the header
            return false //cancel default click behavior
         }
      })
      $headers.bind("mouseleave", function(){
         clearTimeout(config.revealdelay)
      })
      config.oninit($headers.get(), expandedindices)
      $(window).bind('unload', function(){ //clean up and persist on page unload
         $headers.unbind()
         var expandedindices=[]
         $subcontents.filter(':visible').each(function(index){ //get indices of expanded headers
            expandedindices.push($(this).attr('contentindex'))
         })
         if (config.persiststate==false && $headers.length>0){ //persist state?
            expandedindices=(expandedindices.length==0)? '-1c' : expandedindices //No contents expanded, indicate that with dummy '-1c' value?
            ddaccordion.setCookie(config.headerclass, expandedindices)
         }
      })
   })
   }
}

//preload any images defined inside ajaxloadingmsg variable
ddaccordion.preloadimages(jQuery(ddaccordion.ajaxloadingmsg).filter('img'))

/***********************************************
* Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/

</script>


<script type="text/javascript">


ddaccordion.init({
   headerclass: "silverheader", //Shared CSS class name of headers group
   contentclass: "submenu", //Shared CSS class name of contents group
   revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
   mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
   collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
   defaultexpanded: [12], //index of content(s) open by default [index1, index2, etc] [] denotes no content
   onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
   animatedefault: true, //Should contents open by default be animated into view?
   persiststate: false, //persist state of opened contents within browser session?
   toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
   togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
   animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
   oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
      //do nothing
   },
   onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
      //do nothing
   }
})


</script>


<style type="text/css">

.applemenu{
   margin: 5px 0;
   padding: 0;
   width: 500px; /*largeur de l'acordeon*/
   border: 1px solid #9A9A9A;
   color: #000;
   background-color: #0F6;
   font-weight: bold;
   background-color: #999;
   border-top-width: medium;
   border-right-width: 1;
   border-bottom-width: 1;
   border-left-width: 1;
   border-top-style: dashed;
   border-right-style: dashed;
   border-bottom-style: dashed;
   border-left-style: dashed;
   border-top-color: #030;
   border-right-color: #030;
   border-bottom-color: #030;
   border-left-color: #030;
   height: auto;
}


.silverheader{
   color: white;
   background-color: #096;
   border-top-width: medium;
   border-right-width: 1;
   border-bottom-width: 1;
   border-left-width: 1;
   border-top-style: dashed;
   border-right-style: dashed;
   border-bottom-style: dashed;
   border-left-style: dashed;
   border-top-color: #030;
   border-right-color: #030;
   border-bottom-color: #030;
   border-left-color: #030;
   text-align: center;
}
.silverheader:hover{
   background-color: #CF6;
   color: #CCC;
   cursor: help;
}


.applemenu div.submenu{ /*contenu*/
   background: white;
   padding: 5px;
   height: 300px; /*hauteur de la div*/
   color: #000;
   font-weight: normal;
}

</style>

</head>

<body>

<div class="applemenu">
<div class="silverheader">Titre 1</div>
   <div class="submenu">
   Contenu du titre 1<br />
   </div>
<div class="silverheader">Titre 2</div>
   <div class="submenu">
   Contenu du titre 2<br />
   </div>
<div class="silverheader">Titre 3</div>
   <div class="submenu">
   Contenu du titre 3<br />
   </div>
<div class="silverheader">Titre 4</div>
   <div class="submenu">
   Contenu du titre 4<br />

   </div>
<div class="silverheader">Titre 5</div>
   <div class="submenu">
   Contenu du titre 5<br />
   </div>
  <center>
    <input type="button" value="Refermer le menu" Onclick="javascript:window.history.go(0)"> <br />
  </center>
</div>
</body>
</html>

A+
missx

missx
Membre actif

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

missx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Karmixi Mer 9 Nov 2011 - 15:28

Merci :3
Karmixi

Karmixi
**

Messages : 52
Inscrit(e) le : 15/12/2010

http://paprikaschool.pro-forums.fr/
Karmixi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Dark Raviel Mer 9 Nov 2011 - 15:31

Y avait pas besoin de java pour menu cliquable c'est tout à fait possible en CSS avec des classes héritées.
avatar

Dark Raviel
****

Messages : 344
Inscrit(e) le : 10/10/2007

http://rpgdedarkraviel.forumpro.fr
Dark Raviel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Karmixi Mer 9 Nov 2011 - 15:33

C'est-à-dire? °°
Karmixi

Karmixi
**

Messages : 52
Inscrit(e) le : 15/12/2010

http://paprikaschool.pro-forums.fr/
Karmixi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Dark Raviel Mer 9 Nov 2011 - 15:37

Par exemple en CSS tu as

.main_menu{
codes;
}
.main_menu_2 = ceci est l'élement hérité, ce la veut dire qu'il détient le CSS du premier élement que tu peux en ajouter.

J'essairais de trouver un codage CSS d'exemple.
avatar

Dark Raviel
****

Messages : 344
Inscrit(e) le : 10/10/2007

http://rpgdedarkraviel.forumpro.fr
Dark Raviel a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Karmixi Mer 9 Nov 2011 - 15:43

D'accord, merci Very Happy
Karmixi

Karmixi
**

Messages : 52
Inscrit(e) le : 15/12/2010

http://paprikaschool.pro-forums.fr/
Karmixi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par missx Mer 9 Nov 2011 - 18:00

Dark Raviel a écrit:Y avait pas besoin de java pour menu cliquable c'est tout à fait possible en CSS avec des classes héritées.
comme le premier que j'avais proposé.
missx

missx
Membre actif

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

missx a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon vertical dans un simple message.

Message par Karmixi Sam 12 Nov 2011 - 11:08

Ah d'accord o_o
Karmixi

Karmixi
**

Messages : 52
Inscrit(e) le : 15/12/2010

http://paprikaschool.pro-forums.fr/
Karmixi a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum