JQuery coding problem wiht accordian menu.

I am using the code from this site to create an accordion menu.  I have the accordion opening and closing but I can't figure out how to get the arrows to show up and swap out so they are pointing as an open and close for each menu item.  Need to have the arrows open and close as in the sample here.  I must be leaving something out but not sure what or where to put it.  Don't know much about jquery.

http://www.jqueryscript.net/accordion/Create-A-Responsive-Accordion-with-jQuery-CSS3-Squeezebox-js.html
kdschoolAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Tom BeckCommented:
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;
}

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;
}

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);
}

Open in new window

You could also use Font Awesome fonts for this.
0
kdschoolAuthor Commented:
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.
0
kdschoolAuthor Commented:
i just saw you said use Font Awesome fonts for this.  Can you tell me how to do that please?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

kdschoolAuthor Commented:
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.
0
kdschoolAuthor Commented:
fa-angle-down  and fa-chevron-down

These two are good from the font awesome library.
0
Tom BeckCommented:
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?
0
kdschoolAuthor Commented:
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?
0
Tom BeckCommented:
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;
}

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;
}

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>
0
kdschoolAuthor Commented:
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
0
kdschoolAuthor Commented:
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;
}
0
Tom BeckCommented:
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";
}

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.
0
kdschoolAuthor Commented:
does it have to be in the root of the site or can I just put in the folder with the code?
0
kdschoolAuthor Commented:
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>
0
Tom BeckCommented:
I don't know what to tell you. Your markup worked perfectly on my system. Tested in Firefox, Chrome, and Safari.

Any errors in the console?

Here's my folder hierarchy.

TestStuff(root directory)
 -- teststuff_71.html (the test page)
 -- js (folder)
    -- squeezebox.js  (I moved it to here on my system and changed the path on the page)
 -- demo_files (folder)
   -- css (folder)
      -- styles.css
-- icons (folder)
   -- fonts (folder)
      -- icomoon.eot
      -- icomoon.svg
      -- icomoon.ttf
      -- icomoon.woff
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
kdschoolAuthor Commented:
I am using I.E. 9 will test in other browsers.  Regardless thank you for all your help.  You deserve the points for sure.
0
kdschoolAuthor Commented:
You were right it does not work in I.E versions 9, 10 or 11. It only works in chrome or firefox.

Thank you.
0
Tom BeckCommented:
Squeezebox claims to work in IE6+.
0
kdschoolAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.