Giter VIP home page Giter VIP logo

ejbenke / jquery-accordion-section Goto Github PK

View Code? Open in Web Editor NEW
2.0 1.0 1.0 307 KB

Collapsible Accordion Section designed to be added to SharePoint page using a CEWP (Content Editor Web Part) in order to display list data in accordion format

License: MIT License

HTML 100.00%
sharepoint-page sharepoint jquery jqueryui jquery-ui accordion-widget accordion jquery-ui-accordion sharepoint-webpart

jquery-accordion-section's Introduction

jQuery Accordion Section

Collapsible Accordion Section designed to be added to SharePoint page using a CEWP (Content Editor Web Part) in order to display list data in accordion format

 

SPFx Collapsible Accordion Section web part

  • Adds a collapsible accordion to a page.
  • Populate the accordion structure from a List on your site.
  • The list used to populate the accordion section must have a Title column and Content column & its name specified in the REST API in the code before deploying.  

jQuery Accordion Example

 

Applies to

 

Solution

Solution Author(s)
jQuery Collapsible Accordion Section Erik Benke

 

Version history

Version Date Comments
1.0 June 27, 2018 Initial release
1.1 September 19, 2019 Minor updates, adding to Github

 

Using the code

    1) Create or use a list with a Title and a Content column:

  • The value in the Title column for each item will appear in the heading bars of the Accordion.
  • The value in the Content column for each item will appear in the collapsible content section of the Accordion

    Create list for use with the Accordion

    2) Add the .html file, jQuery library, jQueryUI library and css to your Site Assets folder on your site

  • Edit the following line of code (line 28) in ClassicAccordion,html to replace "ListName" with the actual name of your list that you want to use to populate the Accordion Section: sEndPoint += "/_api/web/lists/getbytitle('ListName')/items";
  • In ClassicAccordion.html, either edit the paths in the first 3 lines or make sure you mirror the folder structure specified within your Site Assets folder on your site.
  • Add your modified ClassicAccordion.html file to your Site Assets
  • Add jQuery library, jquery.min.js (not included in this repo) to your Site Assets. Download jQuery
  • Add my custom jQueryUI library and associated css (or generate your own and use those instead: jQueryUI download builder) to your Site Assets

    Add your code to Site Assets

    3) Add a Content Editor Web Part (CEWP) to your page:

    Add a Content Editor Web Part

    4) Configure the Content Editor Web Part (CEWP) to point to the code entry file:

  • Choose Edit Web Part and then within the Content Link field add the path of your entry file for your code: Example of a full path: /sites/ClassicAccordion/SiteAssets/ClassicAccordion.html

    Configure Content Editor Web Part

jquery-accordion-section's People

Contributors

ejbenke avatar

Stargazers

 avatar  avatar

Watchers

 avatar

Forkers

sabbiseaan

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.