@munsterlander thanks for the reply, sorry I didn’t include the splitter code.
So my code does work, the splitter-side does open up.
The weird glitch that’s happening is that, for example:
If I’m on the shop.html page and if I click on hamburger to open the splitter-side, the splitter-content changes to the contact.html page content and then the splitter-side opens up.
This is my code:
<!-- SPLITTER -->
<ons-splitter>
<ons-splitter-side page="views/menu.html" id="menu" side="left" width="220px" collapse swipeable>
</ons-splitter-side>
<ons-splitter-content id="content" page="home.html">
</ons-splitter-content>
</ons-splitter>
<!-- PAGE: HOME -->
<ons-template id="home.html">
<ons-toolbar>
<div class="center logo"><img src="images/logo.png" /></div>
</ons-toolbar>
<ons-tabbar id="myTabbar" position="bottom" var="myTabbar">
<ons-tab>
<ons-button onclick="fn.open()">
<ons-icon icon="ion-navicon, material:md-menu" size="32px, material:24px"></ons-icon>
</ons-button>
</ons-tab>
<ons-tab page="views/contact.html">
<ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
</ons-tab>
<ons-tab page="views/home.html" label="Home" active="true">
</ons-tab>
<ons-tab page="views/shop.html">
<ons-icon icon="ion-ios-cart, material:md-shopping-cart" size="32px, material:24px"></ons-icon>
</ons-tab>
<ons-tab page="views/search.html">
<ons-icon icon="ion-search, material:md-search" size="32px, material:24px"></ons-icon>
</ons-tab>
</ons-tabbar>
</ons-template>
JavaScript I’m now using thanks to you :)
window.fn = {};
fn.open = function () {
document.getElementById('menu').toggle();
}
I also tested something, I changed the URL of the second tabbar button:
<!-- WHAT I HAD -->
<ons-tab page="views/contact.html">
<ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
</ons-tab>
<!-- CHANGED IT TO -->
<ons-tab page="views/search.html"> <!-- CHANGED FROM contact.html TO search.html -->
<ons-icon icon="ion-ios-cart, material:md-account-box-mail" size="32px, material:24px"></ons-icon>
</ons-tab>
After doing this I noticed that when I clicked on the hamburger to open the splitter-side the splitter-content then changed to the search.html page content. really weird!
It seems like when I click on the hamburger to open the splitter-side, the splitter-content changes to the content of the next ons-tab page. If this makes sense.