1

How to create and add an Accordion Widget to a page

+

Flickr +

Twitter +

lnstagram +

YouTube +

How to create an Accordion Widget In order to add an accordion widget to a page, you must first create the widget.

First, add an accordion widget to your department folder. Select ”New” from the top navigation at the top left of the screen, then select Widgets  Accordion

1

2

llJWCMS@ !U

C tpoI1

~ iew Q iupd- D Faculty Sit• • CJ law-an D Fli. , s CJ safety- D Foldo, CJ service D New wetaite • CJ staff D ••g•• CJ tobacc ,--. D w-,9..s Accordion LJ widget Gal Mus.a-g• ~ c,.;llout adminis--~-,.,,,..,,.4 Classe:S customer-satisfact10n-su # Color Panet !;;l inde)< ~ Feature 0 message-from-the-chief 0 # F1kkr

Q mission I Googte MJp CJ pre-law ""One.tu Calendar CJ pre-professional J Per'$onn~ CJ PSYChology # Quote radiologic-sciences D .JSt ief eshow redhawk-card CJ Stats CJ redhawk-info-hub

The new widget will appear

New Block

System Name 11ccon:l1on

Parent folder CJ [police/iupd· police-academy]

rfrnformatld I

Data Oennibon 0 (plug,ns/accord,on]

accordion t------

Aocordion 10 Name (lowerc:aff, hyphen for s aces) • Accordion + Accordion Header Test

Content

Enter a System Name for your Accordion. (Remember all lowercase letter and hyphens for spaces.)

It is best to have the word accordion in the name. This will help identify the widget in your widgets folder.

2

3

EX: homepage-accordion

The “Parent Folder” section, click on the link between the brackets [ ] to change the parent folder to your Department’s Widget folder.

Information (**Below is the “Information” section Data definition block – IGNORE --DO NOT TOUCH this block)

Accordion Below the Data Definition is the Accordion ID Name. This name must be lowercase letters and hyphens for any spaces.

EX ID Name: my-accordion

In this section you will add information to your widget.

All widgets must have the Accordion Header field completed. In the Accordion Header text field, please put a clear descriptive subject title.

,.. Accord ion

+ - v (l/5)

Accordion Header Facebook Accordion Header Content n I x, x' I B I II - 1a;. ;a• I Styles • Head;no3 X -0 I·.~ ~ - 11§1= I ~II' ~II' I 11•.++i. - J I .J Indiana University Northwest Official facebook page Alumni Aawciatien 611sincu and frnnemics School of Pivecsitv fou itv aod MultirultmAI Aftaio Indiana UniYto N Noabwcst Ute Stctss & Your Health Inrematlon.al Human Cadaver Pro::w:•on Program Mathtmotlc:s ,od Ac:t\lttlal Sdenc:t: Sehool of Nursing Sebool of BtdHawk& Atblfitirn Student Lift Prna rtmtnt Conte nt field

Below the Accordion Header field is a Content field where you can enter your text information.

Below the Content field is a option: Default to Open. This means the will be open on the page.

This is recommended when there is no other content on the page other than the widget.

3

4

I Default to open n Yes Check this box if you want your tab to be open on the page

Note: To add or remove an accordion tab, click on the plus or minus icons. To move aa accordion tab up or down click on the arrows icons.

+ - v A (2/5)

Once you have finished creating your tabs click the “Submit” at the bottom of the page L

Submit Sav e Ora~ Cancel Adv a 11 ced O pti 0 11 s

You have now created your Accordion widget.

Adding the accordion widget to a page

To add a widget to a page, first select a page you want to put the widget on and then edit the page. You edit one of two ways: Option 1: 1) You can either click on the page link, once the page opens, navigate to the top of the page and click edit.

4

5

(2::;, social CJ contact CJ docs Page link CJ images under folder structure CJ widgets D follow-us 0 111!11

!;_dit Move/Rename Copl( fublish Relationships More

System Out puts n n l ata

Option 2: You can also hover to the right of the page link and an arrow will appear, click on the arrow and a will appear and then select “Edit”. In WCMS, all assets have a Context Menu available as a small arrow when hovered over with a mouse. When the small arrow is clicked the Context Menu appears and displays common functions available.

~social An arrow wi ll appear if you hover t he CJ contact mouse pointer to the right of the page link CJ docs CJ Images CJ widgets

Context Menu CJspea CJ special­

D sponsor 11 RelatioMhips CJ stem-sc Delete D student Access Aud,ts CJ student : Reference CJ student ' Versions After you have selected”Edit”, navigate to the “Section >>Row>>Column>>Design Element”

5

6

• Section » Row 1------+

~ ection » Row » Background I

rl ' Section » Row » Column I

I· Section >> Row >> Column I +- A (2/2) Desktop Columns three-fourths

Tablet columns three-fourths

Mobile columns whole

Left justify O Yes w breadcrumbs

Element Widget Chooser

• Section » Row » Column » Design Element » Block Choos

Select Widget O ~ [sod al/wldgets/ sodal-accordlon] °"'

In the Element drop down select “Widget Chooser”

Once “Select Widget” appears, select your widget, click on the word “[ Search ]” a drop down menu will appear.

Next select “Browse” to locate your folder that contains your widget. Once selected the widget path name will replace the word search.

• Section •> Row » Column » Design Element Widset path name + Element Widget Olooser

• section » Row » column » oeslqn Element »

Sel ect Widget O ~ [ social/widgets/ social -accordion] "'

Once you have added your widget to the page, click “submit” at the bottom of the page.

6

7

Submit Save Draft Cancel Adv a n ced O ptions

In order for your changes to appear on the website, you must publish the page.

Note: To remove a widget from the page, click on the minus

7