blsc-accordions-2019

A redo of the BLSC accordions but only using standard html/css/js.

Behavior

An accordion created with the blsc-accordion library will show one or more “zones” of content. Each zone title can be clicked on to expand the zone.

Also, links are possible, either on the same page or as full URLs, that take the user directly into an expanded zone.

Usage

This section discusses how to create html that will be “accordion-ized”.

Assumptions

Assuming that the blsc-accordion support has been rolled out to a website (CSS, JS, etc), this is the structure that HTML should follow.

HTML Structure

HTML that follows the simple structure below will be converted into an accordion.

<div id="accordion" class="liveaccblisscruise">

  <!-- Section -->
  <h3>Section 1</h3>
  <div>
    Section 1 content. Any valid HTML!
  </div>

  <!-- Section -->
  <h3>Section 2</h3>
  <div>
    Section 2 content. Any valid HTML!
  </div>

</div>

In the above:

Each <h3></h3> must be followed by a <div></div> that contains its content.
There can be as many sections as desired so long as both h3 and div are present.

Automatic Links & Bookmarks

The blsc-accordion supports linking to a zone directly. This causes the zone to expand.

For instance, while on the same page that has an accordion, to link to Section 2 in the above example:

<a href="#section-2">Section 2</a>

Similarly, from any page, to link to Section 2 in the above example:

<a href="http://blsc-accordions.github.ericsoto.net/#section-2">Section 2</a>

In both examples above, the text used for the bookmark (the ‘#xxxx’ part)is simply the same text used in the h3 but all lowercase and with spaces converted to hyphens (‘-‘).

Installing

Installing the accordion funcitonality consists of placing the correct files in the SkinPath which in the current DNN installation is D:\inetpub iss\BLSC\wwwroot ISS-BLSC DNN 6.2.9\Portals\1\Skins\BLSC2014R

1. Installing the StyleSheet

Place the file assets/accordion-dos.css in SkinPath\accordion-dos.css

Then add this to the skin file Bliss_LP.ascx:

<dnn:DnnCssInclude FilePath="accordion-dos.css" PathNameAlias="SkinPath" runat="server" Priority="100" />

2. Installing the JavaScript

Place the file assets/accordion.js in SkinPath\js\accordion.js

Than add this to the skin file Bliss_LP.ascx

<dnn:DnnJsInclude FilePath="js/accordion.js" PathNameAlias="SkinPath" runat="server" />

3. Installing images

The StyleSheet requires some jquery-ui image files. So Copy all the images in assets/images/ in SkinPath\images\

Further Development

The development of the library consists of the creation of 2 files:

One CSS file for styling the accordion
One JS file for firing the accordion and creating personalized URLs for ech section of the accordion

For that we use Gulp.js to compile and concatenate all assets in just 2 files. for that you need to have installed:

node
dos2unix

Development setup

npm install -g gulp
brew install dos2unix
cd /path/to/repos/blsc-accordions-2019
npm install
nano gulpfile.js # Change the  watchRemoteURL
gulp --tasks # Just for help
gulp watch

After that you can make changes to the files in src/ and the compiled output will be placed in the assets/ folder

Publishing to the repo

git push origin master

Tests

The files in the directory tests are just local tests