I want the “+” Symbols and “-” Symbols, but not sure how to do without an external link in the code.
I got the code from the below page.
Please help, I’m new to all these 
Hi vishnupantulu, welcome to the forums!
I agree with you on avoiding external resources when you don’t need to! 
If you don’t want to fetch an external font like they do in the example you linked to you could instead use symbols included in the font already used in the document.
Try a bold weight plus sign matched with a math minus sign in a pseudo element styled to look like the Font-Awsome characters.
The picture you posted doesn’t show so I refer to the tuturial you linked to and made a stand alone example using the code from your example:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Untitled</title>
<style>
/*** CSS for collapsable headers ***/
#DeltaPlaceHolderMain h2 {
border-radius: 2px;
padding: .25em;
background: #0072C6;
color: #fff;
margin-bottom: .5em;
}
/*** Expanded h2 ***/
#DeltaPlaceHolderMain h2:before {
display: inline-block;
margin-right: .5em;
border-radius: .2em;
padding: 0 .1em .1em ;
background: black;
color: #fff;
cursor: pointer;
vertical-align:middle;
font: bold 1.2em/1 verdana, sans-serif;
content: '\2212'; /* math operators minus sign */
}
/*** Collapsed h2 ***/
#DeltaPlaceHolderMain h2.expand:before {
content: '\2b'; /* basic latin plus sign */
}
</style>
</head><body>
<div id="DeltaPlaceHolderMain">
<h2 class="expand"> Collapsed header. </h2>
<h2> Expanded header. </h2>
</div>
</body></html>
Hi Erik, Thanks for your reply.
I tried the code, but it displayed `
The above image and also didnt expand when I tried to expand the titles.
Thank you very much for your help.
Regards
Vishnu
1 Like
Have you followed step 2 in that tutorial you linked?
1 Like
I answered your specific question how to do without external link, and:
looking at your image it seems you’ve got the symbols right. 
Now, as @m_hutley asked, I guess you also need help following the tutorial you linked to.
There could be other ways to achieve these accordions by CSS, but I’m not familiar with the requirements to get a Javascript free solution that fits Sharepoint.
If you need help with Javascript I suggest a new topic in the Javascript forum.
Thank You folks I’m okay with the java script but my only concern is i dont want to have any links, if the .js file is on my site its ok, also is there a way to download the aswesome font.css for the one in the training page.
The simpliest is to import the font by the provided css link.
Visit fontawesome.com for options.
1 Like
Thank You very much Erik, I have downloaded it but, when I try to map it to the HTML code, it only gives a link, where as the code requires it in .js, how do i get to work.
Also I would like to know how do we map .css to the existing code .
----------And this one I just saw it from a thread, Coothead had answered this. -----------
I tried to add it as a html code as given in info.summit7 page, but it doesnt work.
where do I have to add it to get it worked
Thanks again in advance, I really appreciate your patience in this regard.
Best Regards
Vishnu
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.