{"id":1393,"date":"2016-06-07T17:25:27","date_gmt":"2016-06-07T17:25:27","guid":{"rendered":"http:\/\/www.majory-cubizolles.fr\/blog\/?p=1393"},"modified":"2017-01-23T18:25:30","modified_gmt":"2017-01-23T18:25:30","slug":"ajouter-un-accordeon-dans-une-page-cms-astuce-prestashop","status":"publish","type":"post","link":"https:\/\/www.majory-cubizolles.fr\/blog\/ajouter-un-accordeon-dans-une-page-cms-astuce-prestashop\/","title":{"rendered":"Ajouter un accord\u00e9on dans une page cms | Astuce Prestashop 1.6"},"content":{"rendered":"

Gr\u00e2ce \u00e0 ce tuto tr\u00e8s simple, vous pourrez ajouter un accord\u00e9on dans votre page CMS<\/p>\n

Astuce Prestashop 1.6<\/p>\n

————————————————-<\/p>\n

Solution 1 (ne fonctionne pas toujours)<\/strong><\/span><\/h2>\n

1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n

\"Ajouter<\/a><\/p>\n

<\/p>\n

2. Ins\u00e9rez le code suivant<\/p>\n

div class=\"panel-group\" id=\"accordion\">\r\n<div class=\"panel panel-default\">\r\n<div class=\"panel-heading\">\r\n<h4 class=\"panel-title\"><a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse1\"> Collapsible Group 1<\/a><\/h4>\r\n<\/div>\r\n<div id=\"collapse1\" class=\"panel-collapse collapse in\">\r\n<div class=\"panel-body\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"panel panel-default\">\r\n<div class=\"panel-heading\">\r\n<h4 class=\"panel-title\"><a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse2\"> Collapsible Group 2<\/a><\/h4>\r\n<\/div>\r\n<div id=\"collapse2\" class=\"panel-collapse collapse\">\r\n<div class=\"panel-body\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/div>\r\n<\/div>\r\n<\/div>\r\n<div class=\"panel panel-default\">\r\n<div class=\"panel-heading\">\r\n<h4 class=\"panel-title\"><a data-toggle=\"collapse\" data-parent=\"#accordion\" href=\"#collapse3\"> Collapsible Group 3<\/a><\/h4>\r\n<\/div>\r\n<div id=\"collapse3\" class=\"panel-collapse collapse\">\r\n<div class=\"panel-body\">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div><\/pre>\n
3 Enregistrer et visualiser<\/p>\n
\"Ajouter<\/a><\/p>\n
<\/h2>\n
Solution 2
\n<\/strong><\/span><\/h2>\n
1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code<\/p>\n
\"Capture<\/a><\/p>\n
2. Ins\u00e9rez le code suivant<\/p>\n
<div id=\"accordion\">\r\n<p class=\"accordion-toggle minus-cercle\">Accordion 1<\/p>\r\n<div class=\"accordion-content default\">\r\n<p>Cras malesuada ultrices augue molestie risus.<\/p>\r\n<\/div>\r\n<p class=\"accordion-toggle\">Accordion 1<\/p>\r\n<div class=\"accordion-content\">\r\n<p>Lorem ipsum dolor sit amet mauris eu turpis.<\/p>\r\n<\/div>\r\n<p class=\"accordion-toggle\">Accordion 3<\/p>\r\n<div class=\"accordion-content\">\r\n<p>Vivamus facilisisnibh scelerisque laoreet.<\/p>\r\n<\/div>\r\n<\/div><\/pre>\n
3) Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/js\/global.js. Au d\u00e9but ou \u00e0 la fin peu importe :<\/p>\n
   $(document).ready(function($) {\r\n    $('#accordion').find('.accordion-toggle').click(function(){\r\n\r\n      \/\/Expand or collapse this panel\r\n      $(this).next().slideToggle();\r\n\t\t\/\/Hide the other panels\r\n      $(\".accordion-content\").not($(this).next()).slideUp();\r\n\t  $(this).toggleClass('minus-cercle').siblings().removeClass(\"minus-cercle\");;\r\nreturn false;\r\n    });\r\n  });<\/pre>\n
4) Ajouter le code suivant\u00a0 dans ..\/themes\/lenomdevotretheme\/css\/cms.css<\/p>\n
.accordion-content {\r\n\tdisplay: none;\r\n\tpadding: 10px 20px;\r\n\tfont-size: 14px\r\n}\r\n.accordion-content.default {\r\n\tdisplay: block;\r\n}\r\n.accordion-toggle {\r\n\tbackground-color: #f5f5f5;\r\n\tborder: 1px solid #ccc;\r\n\tcolor: #343738;\r\n\tcursor: pointer;\r\n\tfont-size: 15px;\r\n\tpadding: 10px 15px;\r\n}\r\n.accordion-toggle:before {\r\n\tfont-family: \"FontAwesome\";\r\n\tfont-size: 14px;\r\n\tmargin-right: 8px;\r\n\tcontent: \"\\f196\";\r\n\tdisplay: inline-block;\r\n\tvertical-align: top\r\n}\r\n.accordion-toggle.minus-cercle:before {\r\n\tcontent: \"\\f147\";\r\n}\r\n<\/pre>\n
5)\u00a0 R\u00e9sultat<\/p>\n
\"Ajouter<\/a><\/p>\n
Attention: lorsque vous touchez les fichiers .tpl .css, si vous ne voyez pas de changements, n’oubliez pas de nettoyer votre cache Prestashop !<\/strong><\/span><\/p>\n
Articles similaires<\/h2><\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   70 astuces pour am\u00e9liorer l\u2019efficacit\u00e9 de son blog  
views 193<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie, r\u00e9alis\u00e9e par\u00a0par le site Market Inspector\u00a0met en avant 70 astuces qui permettent de rendre son blog plus efficace ?\r\n\r\nLes th\u00e8mes abord\u00e9s sont :\r\n\r\n \tle SEO\r\n \tl'attitude\r\n \tle contenu\r\n \tla cible\r\n \tla mise en page\r\n \tle r\u00e9seau\r\n\r\n\r\n\r\n\r\n<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Les achats de Noel 2015 ? Made In France Or Not  
views 148<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie a \u00e9t\u00e9 cr\u00e9\u00e9e suite \u00e0 une\u00a0enqu\u00eate de Mobeye r\u00e9alis\u00e9e aupr\u00e8s de 1 300 personnes.\r\n\r\nCe qu'on peut noter :\u00a0\r\nMade in France or not ?\u00a0\r\n- 3 Fran\u00e7ais sur 5 n'ach\u00e8teront pas Made In France\r\n\r\nPourquoi \u00a0? \u00a024% privil\u00e9gient des \u00e9quivalents moins chers et 42% n'y voient pas d'int\u00e9r\u00eat\r\n\r\n\r\n- O\u00f9 faire ses courses ?\r\n- 1 fran\u00e7ais sur 2 fera des achats en ligne\r\n\r\n- 61% des fran\u00e7ais iront dans...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Comment activer SSL dans PrestaShop 1.6 & 1.7 ?  
views 3962<\/div><\/a>\n\t\t\t\t\t\t\t\tDans ce tuto nous allons voir comment activer le SSL sur votre boutique, c'est tout simple\r\nQu'est- ce que le SSL ?\r\nLorsque vous regardez l'url des sites web, ils commencent en g\u00e9n\u00e9ral\u00a0 par \u00ab http:\/\/ \u00bb\u00a0 ou \u00ab https:\/\/ \u00bb. Ce \u00ab s \u00bb indique que le site sur lequel vous naviguez est chiffr\u00e9 afin que vos donn\u00e9es ne puissent pas \u00eatre intercept\u00e9es.\u00a0 Le site est donc s\u00e9curis\u00e9, cela s'appelle SSL soit Secur...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   Connaissez-vous la diff\u00e9rence entre votre profil Facebook et LinkedIn?  
views 1069<\/div><\/a>\n\t\t\t\t\t\t\t\tCette infographie vous explique la difference qu'il peut y avoir entre votre profil Facebook et LinkedIn?\r\n\r\nFacebook : 900 millions d'utilisateurs de tous les genres\r\nLinkedin : 350 millions d'utilisateurs professionnels\r\n\r\nFacebook : Les profils des utilisateurs sont ax\u00e9s sur la vie quotidienne\r\nLinkedin : Les profils des utilisateurs permettent de mettre en valeur les exp\u00e9riences professionnell...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t
  \n\t\t\t\t\t\t  \n\t\t\t\t\t\t  
\n\t\t\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t\t\t 
<\/div>\n\t\t\t\t\t\t  <\/div>\n\t\t\t\t\t\t  <\/a>\n\t\t\t\t\t\t   E-commerce & diff\u00e9rences comportementales  
views 123<\/div><\/a>\n\t\t\t\t\t\t\t\tLa soci\u00e9t\u00e9 Content Square met en avant les diff\u00e9rences comportementales\u00a0sur les sites e-commerce : hommes vs femmes, gauchers vs droitiers, jeunes\u00a0vs ain\u00e9s....\r\n\r\nA - Homme vs Femme\r\n\r\nPar rapport aux hommes\r\n- les femmes interagissent plus et sont plus rapides,\r\n- elles cliquent 30% plus sur les sites,\r\n- elles affichent 12% de pages en plus,\r\n- elles ont un taux d\u2019activit\u00e9 (temps actif \/ temps d...<\/span>\n\t\t\t\t\t\t   \n\t\t\t\t\t\t<\/div>\n<\/div>  ","protected":false},"excerpt":{"rendered":"
Gr\u00e2ce \u00e0 ce tuto tr\u00e8s simple, vous pourrez ajouter un accord\u00e9on dans votre page CMS Astuce Prestashop 1.6 ————————————————- Solution 1 (ne fonctionne pas toujours) 1) Une fois sur la page cms, cliquez sur l’ic\u00f4ne source code Articles similaires 6 \u00e9l\u00e9ments important pour un mailing parfait views 304 Cette infographie, […]<\/p>\n","protected":false},"author":1,"featured_media":1400,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,11],"tags":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/1393"}],"collection":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/comments?post=1393"}],"version-history":[{"count":0,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/posts\/1393\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media\/1400"}],"wp:attachment":[{"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/media?parent=1393"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/categories?post=1393"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.majory-cubizolles.fr\/blog\/wp-json\/wp\/v2\/tags?post=1393"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}