We Keep Coding

Angular mobile - accordion open/close

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

Bootstrap JS - collapsible with toggle

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

Using javascript to close a foundation 4 dropdown button menu window

I am struggling with a JavaScript / jQuery issue. I am developing with foundation 4. I have a group of 5 buttons. Two of the buttons are dropdown buttons. When the dropdown button is pressed a window is presented with the dropdown options(links).
<a id="products" href="#" data-dropdown="prod" class="not_active_button_dropdown">Dropdown Button</a><br>
<ul id="prod" class="f-dropdown">
<li><a class="prod" href="index.php?info=basic">Basic</a></li>
<li><a class="prod" href="index.php?info=unifrost">Unifrost</a></li>
<li><a class="prod" href="index.php?info=teal">Teal-Sorb</a></li>
</ul>
Note: I created my own buttons classes with sass by mixin (class="not_active_button_dropdown").
Now I developed a script that loads the php response into a div #dropdownwrap, changes the buttons so it highlights the current button that has been pressed.
<script style="text/javascript">
$(document).on('click','a.not_active_button, a.prod', function(){
var href=$(this).attr('href');
var querystring=href.slice(href.indexOf('?')+1);
//get
$.get('index_jq.php', querystring, processResponse).error(errorResponse);
//reset all buttons to not active
//normal button
$('a.active_button').removeClass("active_button").addClass("not_active_button");
//dropdown button
$('a.active_button_dropdown').removeClass("active_button_dropdown").addClass("not_active_button_dropdown");
//if it is a normal button make it active
if ($(this).hasClass("not_active_button"))
{
$(this).addClass("active_button");
}
//if it is a dropdown button option link make it active
if ($(this).hasClass("prod"))
{
$('#products').removeClass("not_active_button_dropdown").addClass("active_button_dropdown");
//$('ul#prod.f-dropdown').close();
}
//slide down wrap
if ($('.dropdownwrap').is(":hidden")) {
$('.dropdownwrap').slideDown();
} else {
$('.dropdownwrap').slideToggle("slow");
$('.dropdownwrap').slideDown("slow");
}
return false; // stop the link
});
function processResponse(data) {
$('.dropdownwrap').html(data);
}
function errorResponse() {
var errorMsg = "Your request could not be processed right now.";
errorMsg += "Please try again.";
$('.dropdownwrap').html(errorMsg);
}
</script>
I am not that experienced with JavaScript or jQuery. Anyhow the problem is the following:
//$('ul#prod.f-dropdown').close();
which is commented out above. Everything works fine, my data loads and the dropdown button highlights. The problem is that the foundation 4 dropdown button window does not close after the script executes. This is because (I am guessing) I return false to stop the link from executing. So I tried to close the window using the above commented out line. When I uncomment the line, the window closes but the return false does not execute, that is the link is not disabled, it goes to the link, i. e. index.php?info=basic. So it seems when I add the close window statement, return false does not work. I tried adding the line after return false, but it does not close the dropdown menu.

The return false; not working is probably because there is some JavaScript error before it reaches that line. In this case, the error is calling .close() on something which does not have a close method. Instead, in order to call Foundation dropdown’s close method, you have to do something like the following:
$('#prod').foundation('dropdown', 'close', $('#prod'))
I guess there is a more elegant way to do this, but I found this to work. As a note, next time please post a minimal example on jsfiddle.net and link to it in your question. This makes reproducing your problem much easier.

You also need the data-dropdown-content attribute attached to the dropdown ul element.
Reference: https://github.com/zurb/foundation/issues/1831#issuecomment-15133817

Tab navigation with twitter bootstrap

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

jQuery plugin SimpleModal body onclick close not working

I'm having problems getting the SimpleModal jQuery plugin to close when the body is clicked. So far, only the 'X' button works to close it with:
$('a.modalCloseImg').hide();
Here is my code for launching the modalbox. Note that #login-link is the link that opens the box and #login-form is the hidden modal box.
// launch modal box
$("#login-link").click(function(){
$("#login-form").modal();
});
I've tried adding
$("#login-form").modal(overlayClose:true);
but it doesn't seem to be working. (FYI that parameter is per the documentation of the SimpleModal box as seen here.

Try launching the modal box with an additional parameter, like this:
// launch modal box
$("#login-link").click(function(){
$("#login-form").modal({ overlayClose: true });
});
you forgot additional {}.