JQuery coding problem wiht accordian menu.

kdschool used Ask the Experts™

on 2015-06-22

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

Comment

Watch Question

Do more with

EXPERT OFFICE^® is a registered trademark of EXPERTS EXCHANGE^®

View Solution Only

Tom Beck

Verified Expert

Top Expert 2015

Commented: 2015-06-22

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.

kdschool

Author

Commented: 2015-06-22

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.

kdschool

Author

Commented: 2015-06-22

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

kdschool

Author

Commented: 2015-06-22

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.

kdschool

Author

Commented: 2015-06-22

fa-angle-down and fa-chevron-down

These two are good from the font awesome library.

Tom Beck

Verified Expert

Top Expert 2015

Commented: 2015-06-22

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?

kdschool

Author

Commented: 2015-06-22

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?

Tom Beck

Verified Expert

Top Expert 2015

Commented: 2015-06-22

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>

kdschool

Author

Commented: 2015-06-23

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

kdschool

Author

Commented: 2015-06-23

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

Tom Beck

Verified Expert

Top Expert 2015

Commented: 2015-06-23

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.

kdschool

Author

Commented: 2015-06-23

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

kdschool

Author

Commented: 2015-06-23

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">

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

Tom Beck

Verified Expert

Top Expert 2015

Commented: 2015-06-24

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

kdschool

Author

Commented: 2015-06-24

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

kdschool

Author

Commented: 2015-06-24

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

Thank you.

Tom Beck

Verified Expert

Top Expert 2015

Commented: 2015-06-24

Squeezebox claims to work in IE6+.

kdschool

Author

Commented: 2015-06-25

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.

Do more with

Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial

JQuery coding problem wiht accordian menu.

Premium Content

Premium Content

Explore our Suite of Services