Avatar of kdschool
kdschool
 asked on

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
jQueryJavaScriptBootstrap

Avatar of undefined
Last Comment
kdschool

8/22/2022 - Mon
Tom Beck

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

ASKER
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

ASKER
i just saw you said use Font Awesome fonts for this.  Can you tell me how to do that please?
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
kdschool

ASKER
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

ASKER
fa-angle-down  and fa-chevron-down

These two are good from the font awesome library.
Tom Beck

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?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
kdschool

ASKER
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

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

ASKER
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
Your help has saved me hundreds of hours of internet surfing.
fblack61
kdschool

ASKER
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

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

ASKER
does it have to be in the root of the site or can I just put in the folder with the code?
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
kdschool

ASKER
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>
ASKER CERTIFIED SOLUTION
Tom Beck

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
kdschool

ASKER
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

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

Thank you.
Experts Exchange is like having an extremely knowledgeable team sitting and waiting for your call. Couldn't do my job half as well as I do without it!
James Murphy
Tom Beck

Squeezebox claims to work in IE6+.
kdschool

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