JQuery coding problem wiht accordian menu.

The examples at the link are using icomoon fonts. The css calls for these icomoon fonts to display the arrows. You probably did not include these on your web server or they are not accessible.

@font-face {
font-family: 'icomoon';
src: url("../icons/fonts/icomoon.eot?iqfpkj");
src: url("../icons/fonts/icomoon.eot?#iefixiqfpkj") format("embedded-opentype"), url("../icons/fonts/icomoon.woff?iqfpkj") format("woff"), url("../icons/fonts/icomoon.ttf?iqfpkj") format("truetype"), url("../icons/fonts/icomoon.svg?iqfpkj#icomoon") format("svg");
font-weight: normal;
font-style: normal;
}

Select all Open in new window

Turning the arrows 90 degrees is handled in the css with transformations like this:

.squeezhead .icon-arrow-right {
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
font-size: 1.5em;
display: inline-block;
top: 13px;
right: 15px;
position: absolute;
}

Select all Open in new window

And this:

.accordion_open .icon-arrow-right {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}

Select all Open in new window

You could also use Font Awesome fonts for this.

is the icomoon fonts a directory I can download those fonts and put on my web server?   I added the icoomon code to my css file and no arrows.  

I do have both set's of the code  for arrows in my css file already so it must be the icoomon issue.

i just saw you said use Font Awesome fonts for this.  Can you tell me how to do that please?

I think I can use these two arrows.  fa fa-file-pdf-o and  fa fa-chevron-down from the font awesome. Jut not sure where or how to add these to the code.

fa-angle-down  and fa-chevron-down

These two are good from the font awesome library.

You would include Font Awesome on your page

https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css

And pick an icon for the arrow. Look at this jsFiddle example. I included the transformations from the examples at the link in your question.

http://jsfiddle.net/s0nmLgwp/

Now, having said all that, making it work with Squeezebox is another story. The Squeezebox javascript works by changing the classes on the font to make the transformations happen. My jsFiddle simply works on hover. When I said Font Awesome can also be used, I was thinking Bootstrap accordion panels.

Since the download of Squeezebox includes the icomoon fonts, why not just upload those to your web server in the proper directory and it will work the same as the example?

I did not see the fonts on that site that I could upload.  Would I just create a directory upload them and the point to that directory?

The fonts are in the download package.

Create-A-Responsive-Accordion-with-jQuery-CSS3-Squeezebox-js/demo_files/icons/fonts

The @font-face definition in the css file looks like this:

@font-face {
font-family: 'icomoon';
src: url("../icons/fonts/icomoon.eot?iqfpkj");
src: url("../icons/fonts/icomoon.eot?#iefixiqfpkj") format("embedded-opentype"), url("../icons/fonts/icomoon.woff?iqfpkj") format("woff"), url("../icons/fonts/icomoon.ttf?iqfpkj") format("truetype"), url("../icons/fonts/icomoon.svg?iqfpkj#icomoon") format("svg");
font-weight: normal;
font-style: normal;
}

Select all Open in new window

The file paths (ex. /icons/fonts/icomoon.eot) to the font files need to match, relative to the stylesheet, whatever directory structure you have on your web server. "../" of course means up one level in the directory hierarchy from the stylesheet. So yes, "upload them and point to that directory" from the stylesheet!

[class^="icon-"], [class*=" icon-"] {
 font-family: 'icomoon';
 speak: none;
 font-style: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

Select all Open in new window

This definition says use the "icomoon" font family for any class starting with "icon", example:

<span class="icon-arrow-right"></span>

In the source code for the menu the fonts are obtained this way.
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'>

I added the fonts to my directory under icons/fonts/

How do I change this reference to find the locally

In the css it is referencing the correct directory for these but still not showing up.

@font-face {
font-family: 'icomoon';
src: url("/icons/fonts/icomoon.eot?iqfpkj");
src: url("/icons/fonts/icomoon.eot?#iefixiqfpkj") format("embedded-opentype"), url("/icons/fonts/icomoon.woff?iqfpkj") format("woff"), url("icons/fonts/icomoon.ttf?iqfpkj") format("truetype"), url("/icons/fonts/icomoon.svg?iqfpkj#icomoon") format("svg");
font-weight: normal;
font-style: normal;
}

Any errors in the javascript console regarding font files not found?

"/icons/fonts/icomoon.eot?#iefixiqfpkj"
Your "icons" directory is in the root of your site?

Got a link to a live site?

My test:
1.) I copy the icomoon font files to the proper directory.
2.) I create a simple test page with this css in the head section. My "icons" directory is in the same folder as the page so I can use "./icons/..." or "icons/..." in the file path.

@font-face {
	font-family: 'icomoon';
	src: url("./icons/fonts/icomoon.eot?iqfpkj");
	src: url("./icons/fonts/icomoon.eot?#iefixiqfpkj") format("embedded-opentype"), url("./icons/fonts/icomoon.woff?iqfpkj") format("woff"), url("./icons/fonts/icomoon.ttf?iqfpkj") format("truetype"), url("./icons/fonts/icomoon.svg?iqfpkj#icomoon") format("svg");
	font-weight: normal;
	font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.icon-arrow-right:before {
	content: "\e603";
}

Select all Open in new window

3.) I add this to the body.
<span class="icon-arrow-right"></span>

And I get an arrow displayed in the browser.

The Source Sans Pro google font has nothing to do with the arrow.

does it have to be in the root of the site or can I just put in the folder with the code?

Ok I took everything out that would allow the menu to still work.  Here is all the code on one page with CSS inline.  The directory with all the files is DEMO/demo.html and the icons/fonts/ directory is in the same directory with demo.html.  Still no arrow.  this statement is on every line that opens
<span class="icon-arrow-right"></span>

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400,700' rel='stylesheet' type='text/css'>
<link  rel="stylesheet" href="demo_files/css/style.css">
<!--[if lt IE 9]>
            <script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
        <![endif]-->
<style>
@font-face {
      font-family: 'icomoon';
      src: url("icons/fonts/icomoon.eot?iqfpkj");
      src: url("icons/fonts/icomoon.eot?#iefixiqfpkj") format("embedded-opentype"), url("icons/fonts/icomoon.woff?iqfpkj") format("woff"), url("icons/fonts/icomoon.ttf?iqfpkj") format("truetype"), url("icons/fonts/icomoon.svg?iqfpkj#icomoon") format("svg");
      font-weight: normal;
      font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
      font-family: 'icomoon';
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
}
.icon-arrow-right:before {
      content: "\e603";
}
</style>
<title>jQuery Squeezebox.js Plugin Demos</title><br>

</head>
<body>
<span class="icon-arrow-right"></span>
<div class="wrap">
<div class="page_content">
<h3> Menu with arrows </h3>

<h3 id="callbacks"> Accordion with callbacks </h3>

<section class="accordion-3">
<header class="squeezhead">
<p>Nice arrows</p>
<span class="icon-arrow-right"></span> </header>
<div class="squeezecnt">
<p>your content here</p>
</div>
<header class="squeezhead">
<p>Header #2</p>
<span class="icon-arrow-right"></span> </header>
<div class="squeezecnt">
<p>your content here</p>
</div>
<header class="squeezhead">
<p>Header #3</p>
<span class="icon-arrow-right"></span> </header>
<div class="squeezecnt">
<p>your content here</p>
</div>
<header class="squeezhead">
<p>Header #4</p>
<span class="icon-arrow-right"></span> </header>
<div class="squeezecnt">
<p>your content here</p>
</div>
</section>


</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="squeezebox.js"></script>
<script>

            $('.accordion-3').squeezebox({
                  onOpen: function(el){
                        el.clickedEl.addClass('accordion_open');
                  },
                  onClose: function(el){
                        el.clickedEl.removeClass('accordion_open');
                  }                  
            });
      </script>
<script type="text/javascript">



</script>

</body>
</html>

I am using I.E. 9 will test in other browsers.  Regardless thank you for all your help.  You deserve the points for sure.

You were right it does not work in I.E versions 9, 10 or 11. It only works in chrome or firefox.

Thank you.

Squeezebox claims to work in IE6+.

Not the case unless there is some other code you add for I.E.  I tested in 9, 10 and 11 and the arrows do not work in any of them.  The menu works but can't get the arrows to work.