SharePoint online, Office 365, SharePoint 2013, SharePoint 2010 accordion option / menus, needed depending of how and what data you have to show to the users, here I am writing an example of FAQs section with Accordion as below example is using only jQuery, Css and
SPServies to show data from SharePoint list to your page, this sample can be
added in App for learning purpose.
<html>
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<TITLE>SharePoint Accordion option using
jQuery and css : sample</TITLE>
<style type='text/css'>
#AccordionByPraveen {
list-style: none;
padding: 0px;
width: 99%;
margin: auto;
}
#AccordionByPraveen li {
display: block;
background-color:
#0074C3;
color: white;
font-size: 15px;
cursor: pointer;
padding: 5px 5px 5px
8px;
list-style: circle;
-moz-border-radius: 3px;
-webkit-border-radius:
3px;
border-radius: 3px;
}
#AccordionByPraveen ul {
list-style: none;
padding: 7px;
display: none;
border: 1px silver
solid;
}
#AccordionByPraveen ul li {
font-weight: normal;
font-size: 15px;
font-family: 'segoe ui';
cursor: auto;
color: black;
background-color: #fff;
padding: 5px 5px 5px
12px;
}
#AccordionByPraveen a {
text-decoration: none;
}
#AccordionByPraveen .faqHeadings {
border-top: 1px white
solid;
padding: 15px;
font-family: 'Arial
Rounded MT Bold';
font-family: 'Verdana';
}
#AccordionByPraveen .faqHeadings:hover
{
background-color:
#338DCD!important;
}
</style>
<script type="text/javascript">
$(document).ready(function(e) {
$("#AccordionByPraveen > li").live('click', function() {
$("#AccordionByPraveen > li").css('background-color', '#0074C3');
$(this).css('background-color', '#00487B');
if (false == $(this).next().is(':visible')) {
$('#AccordionByPraveen > ul').slideUp(400);
}
$(this).next().slideToggle(400);
});
AddFAQs();
$('#AccordionByPraveen
> ul:eq(0)').show();
// $('#AccordionByPraveen
> ul:eq(0)').parent().css('background-color','#00487B');
});
function AddFAQs() {
var faqListName =
"FAQs";
var camlViewFields =
"<ViewFields><FieldRef Name='Title' /><FieldRef
Name='Details' /></ViewFields>";
var htmlLis =
"";
var countLi = 1;
$().SPServices({
operation:
"GetListItems",
async:
false,
listName:
faqListName,
CAMLViewFields: camlViewFields,
completefunc: function(xData, Status) {
//alert(Status+faqListName );
$(xData.responseXML).SPFilterNode("z:row").each(function() {
var ttl = $(this).attr("ows_Title");
var ttlDetails = $(this).attr("ows_Details");
ttl = countLi + ") " + ttl;
htmlLis += '<li class="faqHeadings">' +
ttl + '</li><ul>';
htmlLis += '<li>' + ttlDetails + '</li></ul>';
++countLi;
}); // end completefunc
}
});
if
(htmlLis.indexOf("faqHeadings") > 0) {
//alert(htmlLis);
$("#AccordionByPraveen").append(htmlLis);
} else {
htmlLis =
"<li class='faqHeadings'>FAQ couldn't loaded. Please inform Admin or
raise a help ticket with SharePoint team in
AskAlexion.</li><ul><li>Details not found.</li></ul>";
$("#AccordionByPraveen").append(htmlLis);
}
}
</script>
</head>
<body>
<H2
class="headingFAQPage">Frequently Asked Questions</H2>
<ul id="AccordionByPraveen">
<li
class="faqHeadings">How can start form to initnin I can nto see
sumbit button</li>
<ul>
<li>Accordion same
data for first li. you can do this and this to open the form</li>
</ul>
<li
class="faqHeadings">I am new to the site how can I setup my
profile </li>
<ul>
<li>Contact you
website admins or create Help ticket, this is another reply.</li>
</ul>
<li
class="faqHeadings">Latest feature and upcoming event details can
be found at?</li>
<ul>
<li>This is the
url so site ,http.... and see option number three etc etc.</li>
</ul>
</ul>
Original post link is http://makeshortwork.blogspot.in/
Original post link is http://makeshortwork.blogspot.in/
</body>
</html>
Below is working demo, it may be its not looking perfect as some of the google css are applied here forcefully.
Frequently Asked Questions
- How can start form to initnin I can nto see sumbit button
- Accordion same data for first li. you can do this and this to open the form
- I am new to the site how can I setup my profile
- Contact you website admins or create Help ticket, this is another reply.
- Latest feature and upcoming event details can be found at?
- This is the url so site ,http.... and see option number three etc etc.
