how to create an accordion menu with collapsible contents

How to create an accordion menu with collapsible contents 

 to toggle between hiding and showing large amount of content.

bluegriffon, a web editor.

http://bluegriffon.org/
BlueGriffon est un éditeur HTML WYSISWYG (what you see is what you get) qui permet aux novices en matière de code HTML  de modifier le texte d’une mise en page de site sans avoir à plonger dans le code.

Native standalone Windows, MacOS X and Linux app

• Black and Light themes
• HTML 4
• XHTML 1.0
• XHTML 1.1
• html 5 (html) including audio, video and forms
• html 5 (xml) including audio, video and forms
• CSS 3 including 2D and 3D Transformations, Transitions, Shadows, Columns, Font Features and more
• CSS Variables
• SVG
• Internationalization Tag Set (ITS) 2.0
• ARIA role
• Opquast® Accessibility First Step
• Wysiwyg Authoring
• Editable source view
• Editable  @media print   view
• User Interface in 20 languages
• Modifyable menu and button keyboard shortcuts
• Style Properties panel
• DOM Explorer panel
• Script Editor panel
• Stylesheets Manager panel
• Table of Contents
• Markdown support
• FontSquirrel font manager
• Google Fonts font manager

BlueGriffon® is a product of Disruptive Innovations SAS, a French software company founded in October 2003. Based in Saint-Germain en Laye, France.

https://github.com/therealglazou/bluegriffon

collection of sites to test your Codes Online

start coding on line with many web services

Full workspace

https://c9.io/
Cloud9 combines a powerful online code editor with a full Ubuntu workspace in the cloud
Workspaces are powered by Docker Ubuntu containers that give you full freedom over your environment, including sudo rights. Do a git push, compile SASS, see server output, and Run apps easily with the built-in Terminal and Runners.
Each new project is stored in a subfolder where you can generate real physical files. HTML, CSS, JS, PHP, anything you need to code will be saved locally in your account. Then you can later export these files as a whole project and download them to your computer.

Many langages

http://codepad.org/
codepad is an online compiler/interpreter, and a simple collaboration tool.
Paste your code below, and codepad will run it and give you a short URL
C, C++, D, Haskell, Lua, OCaml, PHP, Perl, Plain Text, Python, Ruby, Scheme, Tcl,

http://ideone.com/
Ideone is an online compiler and debugging tool which allows you to compile source code and execute it online in more than 60 programming languages.

javascript/html/CSS

http://jsbin.com/
Gist support: import and export
"add library" menu: you can select between any number of JS libraries – jQuery, JQuery UI...

https://jsfiddle.net/
jsFiddle also supports the inclusion of libraries such as jQuery. You can include additional external resources to JS/CSS files into each testing document. Incredibly their app even supports XHR Ajax where you can pass data back-and-forth between the server and client browser window.
https://jsfiddle.net/about

http://jsdo.it/
you must login but you have access to many codes and you can fork.
Here you can share JavaScript, HTML5 and CSS3 code snippets. Their app is not as open as the others, requiring a much more formal registration process. This requires connecting into any other social network such as Facebook, Twitter, Google, or Github. Then you select a username and off we go to code.
Many of the apps appear to have Japanese writing.
What I love about their interface is how you can actually upload files you’ve already created and store them into a project.

https://codepen.io/pen/

http://www.jslint.com/
JSLint is a JavaScript program that looks for problems in JavaScript programs. It is a code quality tool.

CSS

http://cssdesk.com/
you can fork.

For Google API 

 Google code sandbox "explorer".
https://developers.google.com/apis-explorer/?csw=1#p/

si vous voulez inclure un post sur votre blogspot:
https://developers.google.com/apis-explorer/?csw=1#p/blogger/v3/blogger.posts.insert

gérer votre google drive:
https://developers.google.com/apis-explorer/?csw=1#p/drive/v3/
https://developers.google.com/apis-explorer/?csw=1#p/sheets/v4/

Il faut aussi voir:
https://developers.google.com/
https://developers.google.com/maps/documentation/javascript/

Ref:

http://www.hongkiat.com/blog/tools-to-coding-online/

export de votre story map réalisé avec odyssey.js et personnalisation par l'utilisateur

http://cartodb.github.io/odyssey.js/documentation/#how-it-works

exporter / partager votre narrative story map 

Vous avez 5 possibilités pour exporter / partager votre narrative story map réalisée avec odyssey.js.

pour les dummies, avec les 3 fonctions intégrées (en bas à droite du sandbox):

• une fichier html (compressé en .zip) pour une utilisation en local ou à mettre sur un serveur, 
• avec l'hébergement http://bl.ocks.org via une iframe (pour votre blog par exemple) ou un lien URL

pour les plus expérimentés 

• avec gitHub et ses services d'hébergement, Là vous pouvez même conserver le sandbox pour une utilisation en mode partagé.
• votre fichier .md (markdown) en le copiant/collant. En outre ce fichier est présent à la fin de votre fichier .html... Vous pouvez ensuite le transcoder avec divers outils de conversion.

personnaliser votre story map pour une lecture adaptée

Outre le fait que l'on peut choisir sa basemap comme expliquer dans mon exemple (voir les post de ce blog avec les tags map, GPS).

On peut adapter la lecture.

Faite ouvrir un fichier dans votre navigateur et ouvrez votre .html de votre sauvegarde ou votre bl.ocks.

Faite un clic droit (ou crtl clic sur mac) sur le texte.

vous avez 

dans firefox "examiner l'élément"

dans chrome "inspecter".

Sélectionner "slides_container" (le nom de la structure qui contient votre texte et photos).

Dans firefox:

Dans chrome:

Dans safari, c'est pareil...

Vous voyez à droite "width" c'est la largeur de cette fenêtre.

Par défaut elle est à 320pixels.

Changer à 580px par exemple (vous voyez les changements en temps réel).

Vous pouvez aussi changer le left à 10pix...

Et top à 60pix sinon vous serez gêné par les boutons zoom de la carte.

Fermer cette fenêtre.

En outre il faut prévoir de mettre le centrage de la carte plus à droite lors de l'écriture de votre story map...

Hélas cette présentation/design est un fichier CSS stocké sur odyssey.js GitHub. Il faudra donc le faire à chaque fois!

Pour éviter de le faire à la main. Il faut télécharger le CSS d'odyssey.js et le modifier et l'insérer dans votre .html à la place de

http://cartodb.github.io/odyssey.js/sandbox/css/slides.css

dans ce fichier CSS: 

#slides_container{display:none;position:absolute;top:40px;left:40px;width:320px;

changer 320px à la valeur de 580px par exemple.

sauvegarder votre nouvel .html qui contient le CSS (en mode local).

---