JavaScript for Accordion Menu

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
hromain
Posts: 42
Joined: Wed Apr 11, 2018 12:12 pm

Hi,

I'm trying to add an accordion menu to my skin using the code found here: https://www.w3schools.com/howto/howto_js_accordion.asp. I understand the CSS styling, but I'm unfamiliar with JavaScript. Can I copy and paste the code to an external file somewhere to be used with an HTML5 project?

Here's the code:

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc.addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

One way to do it is to load the external code into a text box using an iFrame. Here is a sample using the code from w3schools.

https://s3-ap-southeast-2.amazonaws.com ... index.html

In this example the text box is offset from the top left by 20 x 20 pixels and the text box size set to 300 pixels wide by 100% high.

I've attached a zip file with the project, skin and output folder.

cheers,

Tony
Attachments
JS_Accordian.zip
(1.17 MiB) Downloaded 247 times
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
hromain
Posts: 42
Joined: Wed Apr 11, 2018 12:12 pm

Thanks! This works great. Quick follow-up question: If I want to use the menu to link to tour nodes, how do I code that into the accordion menu's HTML? Is it an a href tag, and if so, to what?

Also, are there any issues I should be aware of, using JavaScript in my projects this way?
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Quick follow-up question: If I want to use the menu to link to tour nodes, how do I code that into the accordion menu's HTML? Is it an a href tag, and if so, to what?
Yes you would just use HTML & CSS. I've updated the previous sample to include a CSS button in Section 1 and Section 2 that open nodes 1 & 2. You will need to use Node ID's and Direct Node Access.

I'll put together a little tutorial and then post a link to it in this thread.

https://s3-ap-southeast-2.amazonaws.com ... index.html
Also, are there any issues I should be aware of, using JavaScript in my projects this way?
I don't think so as Pano2VR relies upon Javascript to run.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
hromain
Posts: 42
Joined: Wed Apr 11, 2018 12:12 pm

Works perfectly, thank you!
hromain
Posts: 42
Joined: Wed Apr 11, 2018 12:12 pm

Apologies, need to amend this: this works perfectly when I run the project on localhost. However, when I upload the project to S3, I'm running into issues.

I don't think it's an issue with the iframe, because the menu becomes visible when the menu icon is selected. However, when I try to open the accordion by selecting a menu item, it doesn't happen. It's hard to explain what happens so I took a 5-second screen capture: https://s3.us-east-2.amazonaws.com/work ... Script.mov. The same code/project still work fine when generating the output directly from Pano2VR.

Here's the JS code I'm using:

Code: Select all

<script>
(function($){
$(document).ready(function(){

$('#cssmenu li.active').addClass('open').children('ul').show();
	$('#cssmenu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp(200);
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown(200);
			element.siblings('li').children('ul').slideUp(200);
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp(200);
		}
	});

});
})(jQuery);
</script>
Thanks for the help
Attachments
S3_JavaScript.mov
(1.75 MiB) Downloaded 215 times
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

A bit hard to tell why it's doing it without seeing the rest of the code and project files. Do you have a link to the project on S3?

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
hromain
Posts: 42
Joined: Wed Apr 11, 2018 12:12 pm

Sure, still very much a work in progress: https://s3.us-east-2.amazonaws.com/work ... index.html. The accordion menu icon will appear in the top right corner when the browser window is 500px or less. Thanks for taking a look.
Last edited by hromain on Sun Sep 23, 2018 6:58 pm, edited 1 time in total.
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

What sort of information will be displayed when the '+' is clicked in the accordian menu?
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
hromain
Posts: 42
Joined: Wed Apr 11, 2018 12:12 pm

It opens up with a submenu listing the nodes within each category, taking the place of a dropdown navigation menu on a full-size screen:
Screen Shot 2018-09-23 at 11.59.27 AM.png
Screen Shot 2018-09-23 at 11.59.27 AM.png (92.43 KiB) Viewed 5126 times
Screen Shot 2018-09-23 at 11.59.19 AM.png
Screen Shot 2018-09-23 at 11.59.19 AM.png (120.17 KiB) Viewed 5126 times


Here's the "includes/accordion.html" file I'm linking to within the iframe:

Code: Select all

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url(http://fonts.googleapis.com/css?family=Raleway:400,200);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 100%;
  font-family: Raleway, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
#cssmenu > ul > li.active > ul {
  display: block;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 16px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 16px;
  text-decoration: none;
  color: #ffffff;
  background: #8b0000;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li > a:hover {
  color: #d8f3f0;
}
#cssmenu ul > li.has-sub > a:after {
  position: absolute;
  right: 26px;
  top: 19px;
  z-index: 5;
  display: block;
  height: 10px;
  width: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub > a:before {
  position: absolute;
  right: 22px;
  top: 23px;
  display: block;
  width: 10px;
  height: 2px;
  background: #ffffff;
  content: "";
  -webkit-transition: all 0.1s ease-out;
  -moz-transition: all 0.1s ease-out;
  -ms-transition: all 0.1s ease-out;
  -o-transition: all 0.1s ease-out;
  transition: all 0.1s ease-out;
}
#cssmenu ul > li.has-sub.open > a:after,
#cssmenu ul > li.has-sub.open > a:before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
#cssmenu ul ul li a {
  padding: 14px 22px;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  text-decoration: none;
  color: #dddddd;
  background: #49505a;
  -webkit-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul ul li a {
  padding-left: 32px;
}
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul > li.has-sub > a:after {
  top: 16px;
  right: 26px;
  background: #dddddd;
}
#cssmenu ul ul > li.has-sub > a:before {
  top: 20px;
  background: #dddddd;
}

</style>
    
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
</head>
<body>

<div id='cssmenu'>
<ul>
   <!--<li><a href='#'>Quads</a></li>-->
   <li class='has-sub'><a href='#'>Quads</a>
      <ul>
          <li><a href='../index.html#node4' target="_parent">North Quad</a></li>
         <li><a href='../index.html#node6' target="_parent">South Quad</a></li>
         <li><a href='../index.html#node3' target="_parent">Main Quad</a></li>
       </ul>
          </li>
        <li class='has-sub'><a href='#'>Halls</a>
            <ul>
               <li><a href='../index.html#node2' target="_parent">Cobb Hall</a></li>
               <li><a href='../index.html#node1' target="_parent">Booth Business School</a></li>
            </ul>
         </li>
    </ul>


</div>

<script>
(function($){
$(document).ready(function(){

$('#cssmenu li.active').addClass('open').children('ul').show();
	$('#cssmenu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp(200);
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown(200);
			element.siblings('li').children('ul').slideUp(200);
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp(200);
		}
	});

});
})(jQuery);
</script>

</body>
</html>
Post Reply