Hi guys i'm using angular mobile framework and i had implemented the accordion. The thing is that by default when you click on it, it opens and if i click the same component again it doesn't close.
Here is the online example.
http://mobileangularui.com/demo/#/accordion.
What i need is to be able to open it and close it like most of the accordions component. I tried
is.open=""
but it did't work.
It is design to only open, because of this line of code:
ui-set="{'myAccordion': i}"
So when you click on it again, it just restates that this tab should be open.
What you need to do is check if the item clicked on is already the opened one, and if true, then just set it to some outside value.
ui-set="{ 'myAccordion': Ui.get('myAccordion') == item ? -1 : item }"
Related
When in mobile view, the hamburger menu appears and the user clicks the icon it opens, when you click the close icon. its closes.
I'm attempting to allow users to click outside of the menu to close the menu. Unfortunately the JS code provided above, Allows users to click Anywhere on the site, to Open & close the menu. I Don't want this, I just want the menu to be closed when a user clicks outside of it.
How can I achieve this? Any help is appreciated.
document.querySelector('#bg-close').addEventListener('click', function() {
document.querySelector('.nav').classList.toggle('nav-container')
})
The issue I'm attempting to solve is on my website
Summary:
Hamburger menu is being activated with a click anywhere on the site.
You can implement something like below:
It uses an if statement to see if the .nav-open class is active, in case is not there, nothing will happen. In opposite case it will be removed.
$('#bg-close').on('click', function() {
let nav = $('#navElement-id');
if(nav.attr('class') == 'nav-container nav-open'){
nav.attr('class','nav-container');
}
});
*{padding:0;margin:0}
#bg-close{height:100vh;width:100vw;background-color:blue}
.nav-container{color:blue; padding:10px;position:absolute;top:10px; left:0;}
.nav-open{color:black!important;background-color:grey;width:300px;height:200px}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg-close">
</div>
<div id="navElement-id" class="nav-container nav-open">Click on the blue</div>
I am making a menu and have ran in to some jQuery issues.
I want my toggles to stay up once they have been clicked but instead they are sliding up but then straight back down again.
I have managed so far to have one close and another open simultaneously. Any thoughts?
Here is the current JS :
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function(){
jQuery(".menu-container, .full-menu-container").siblings().find('.food-content').slideUp();
jQuery(this).find('.food-content').slideDown();
});
I have made a JS Fiddle:
https://jsfiddle.net/marmaaduke/uyb4Lzuy/
Just exclude the current item clicked from the slideUp (with not) and use slideToggle for the current item.
jQuery(".food-content").hide();
jQuery(".food-content").first().slideToggle(500);
jQuery('.food-item').click(function () {
jQuery(".menu-container, .full-menu-container").siblings().not(this).find('.food-content').slideUp();
jQuery(this).find('.food-content').slideToggle();
});
https://jsfiddle.net/TrueBlueAussie/uyb4Lzuy/1/
Alright, so I've got this js code:
jQuery(".toggle-panel").click(function() {
jQuery('#collapsible-element').collapse({
toggle: true,
});
});
I assume it should open and close #collapsible-element but it can only close it. This #collapsible-element has also classes "collapse in" attached by myself in code. With first click on .toggle-panel it closes the #collapsible-element, but the second click does not open it again. Am I missing something?
You don't need any additional JavaScript code for toggle if you are using bootstrap. check out the following:
http://getbootstrap.com/javascript/#collapse
I'm currently using AngularStrap tabs in a project, and I want the content for one of the tabs to be refreshed every time the tab is shown. I have the tabs set up with
%div(ng-model="tabs.index" bs-tabs="tabs")
%div(ng-repeat="tab in tabs" data-title="{{tab}}")
and the tab is shown using
%div(ng-show="tabs.active().title == 'Previous Requests'")
%div(class="outer-tab-content")
However, since ng-show just displays the tab, and doesn't load it every time it's shown, I can't seem to use ng-load to solve this problem. And, since I'm using AngularStrap tabs, I can't figure out how to add an ng-onclick to the tab in question.
Advice?
You can add a watch for your active tab title in your controller code:
$scope.$watch('tabs.active.active().title', function(newValue, oldValue) {
if(newValue === 'Previous Requests')
$scope.tabs.refresh();
});
I'm trying to create a navigation step by step from bootstrap nav. I would like that the user could only access the next tab by clicking the button at the bottom of each tab.
I've tried adding the class disabled and some JS but despite the change of style your content remains accessible. If any of you have done something similar or know another easier method (plug-in or other), please do not hesitate to respond.
My code example
Thanks in advance.
You can try one of the "wizard" plugins for this functionallity. I've tried the https://github.com/VinceG/twitter-bootstrap-wizard
You can set it up, in a way, that clicking on tabs will have no effect:
onTabClick: function (tab, navigation, index) {
return false;
}