We Keep Coding

bootstrap panels not collapsing

I've got a bootstrap accordion panel, and the panels aren't collapsing like they should when I click on them if they're already open. I can't figure out why. I had this working with the panels hard coded, but once I set up wp_query to load the panels, everything worked except the panels closing.
the function:
<script>
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -50
}, 500);
}
});
});
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
</script>
and the nested loops to generate the accordion panels:
<div class="home-contents">
<div class="container">
<div class="row">
<?php while ( have_posts() ) : the_post(); ?>
<h1 class="faqheading"><?php the_title(); ?></h1>
<!-- <div class="col-sm-9" style="float: none; margin: auto;"><?php the_content(); ?></div> -->
<?php endwhile; ?>
<div class="clear"></div>
</div> <!-- row -->
</div> <!-- container -->
<div class="blog-page">
<div class="container">
<div class="row">
<div class="col-sm-12 ">
<div class="container">
<div class="panel-group" id="accordion">
<?php
/*
* Loop through Categories and Display Posts within
*/
$post_type = 'faq';
// Get all the taxonomies for this post type
$taxonomies = get_object_taxonomies( array( 'post_type' => $post_type ) ); /* gets taxonomy from posts */
foreach( $taxonomies as $taxonomy ) :
// Gets every "category" (term) in this taxonomy to get the respective posts
$terms = get_terms( $taxonomy );
foreach( $terms as $term ) : ?>
<div class="groupheading col-sm-3"><h5 style=" color: #3fa9f5; font-size: 24px; font-weight: 300;"><?php echo $term->name; ?></h5></div>
<?php
$args = array(
'post_type' => $post_type,
'posts_per_page' => -1, //show all posts
'tax_query' => array(
array(
'taxonomy' => $taxonomy,
'field' => 'slug',
'terms' => $term->slug,
'orderby' => 'collapse id',
'order' => 'desc'
)
),
'order' => 'DESC'
);
?>
<?php
$posts = new WP_Query($args);
if( $posts->have_posts() ): while( $posts->have_posts() ) : $posts->the_post(); ?>
<div class="panel panel-default col-sm-9">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#<?php echo 'collapse'.get_the_id();?>"><?php $value = get_field( "faq_heading"); echo $value; ?></a>
</h4>
</div>
<div id="<?php echo 'collapse'.get_the_id();?>" class="panel-collapse collapse">
<div class="panel-body col-sm-9">
<p><?php $value = get_field( "faq_text", false, false); echo $value; ?></p>
</div>
</div>
</div> <!-- .panel -->
<?php endwhile;?>
<div class="panel panel-default col-sm-9 mobilehide" style="height: 45px;"></div>
<div class="groupheading col-sm-3 mobilehide" style="height: 45px;"></div>
<?php
endif; ?>
<?php endforeach;
endforeach; ?>
</div> <!-- .panel-group -->
</div><!-- end col-sm-12 -->
</div> <!-- end row -->
</div><!-- end container -->
</div><!-- end blog-page -->
</div> <!-- .container -->
Edit: Ok, I've added the following but it's still not working:
<script>
$(document).ready(function(){
$("a.cf").click(function(){
$(this).parentsUntil(".panel-default").find(.children(".panel-collapse")).removeClass("in");
});f
});
</script>
2nd edit: I feel like the issue is that .parent isn't finding the right element, but I'm not sure how to direct it correctly.
<script>
$(document).ready(function(){
$("a.cf").click(function(){
$(this).addClass("collapsed");
$(this).parent().find(".panel-collapse .collapse").removeClass(".panel-collapse .collapse").addClass(".panel-collapse .collapse .in");
$(this).find().parent('.collapse.in').removeClass(".panel-collapse.collapse").addClass(".panel-collapse.collapse.in");;
});
});
</script>

Ok, I've solved this. I had originally built this page as part of a wordpress site, and I had included the bootstrap code at the top of the template. In the process of rebuilding the whole site, I put a new bootstrap include in the header file for the site. I left the old include at the top of my template when I got around to working on this particular page, and this redundancy of code was, somehow, causing the collapse to function incorrectly. I still don't know/understand why this was the case, but I've got it working correctly now.
I realize I didn't actually get any responses to this, but thank you to everyone who at least looked.

jQuery variable to bootstrap modal with ajax and php (using Wordpress)

I have an element which contains an ID. I am trying to pass this ID through when opening a modal. The ID is then used to get a Wordpress post.
When an element which has a class (openModalStaff) is loaded in and clicked, I am successfully get the ID and assign it as an attribute to the element. I can also open the modal. What I can't do is display the variable inside the modal, which will then be used to target the correct Wordpress post.
Any ideas?
The JS:
jQuery(".page_meet_the_team").bind("DOMSubtreeModified", function() {
jQuery('.openModalStaff').each(function(i, obj) {
var staffIDAdd = jQuery(this).find('.wd_member_id').text().trim();
jQuery(this).attr('data-id', staffIDAdd);
});
jQuery(".openModalStaff").unbind().click(function() {
// Get ID of staff
var staffID = jQuery(this).attr("data-id");
console.log('fire');
// Post variable to PHP
jQuery.ajax(
{
url: "https://www.example.com/wp-content/themes/voisen-child/partials/partial-staff-modal-ajax.php",
type: "POST",
data: { id: staffID},
success: function (result) {
console.log(staffID);
// Fire modal
jQuery('#staffModal').modal('show');
}
});
});
});
The PHP:
if (isset($_POST['id']) && !empty($_POST['id'])) {
echo $_POST['id'];
} else {
echo 'not set';
}
The modal:
<div class="modal fade" id="staffModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<?php
$type = 'team';
$args = array(
'post_type' => $type,
'post_status' => 'publish',
'posts_per_page' => 1,
'p' => JQUERY UNIQUE ID
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post();
?>
<div class="staffModalRow">
<div class="staffModalLeft">
<?php the_post_thumbnail('full'); ?>
</div>
<div class="staffModalRight">
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
</div>
</div>
<?php
endwhile;
}
wp_reset_query();
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">OK</button>
</div>
</div>
</div>
</div>
</div>

I ended up taking another approach. The modals were needed in Wordpress, so I used a modal per item inside the loop, and used ID's to target unique modals, which meant when I clicked the link I was able to pass the ID directly and open up the required data in to the modal.
Would have preferred a neater way using jQuery / AJAX like the above, and just using the one modal, but for some reason $_POST just wasn't passing the data.

Why did javascript stop working when I implemented ZF2 ACL?

I am using Bootstrap with my Zend Framework 2 app. The formatting was looking good until I implemented ACL controls. Now the only time the buttons are formatted is when the user's role is guest. Any ideas on what went wrong?
#Zend Framework2 folks: Is there any need to include the css and js files in the ACL list?
The ACL control from config/autoload/acl.global.php looks like:
return array(
'acl' => array(
'roles' => array(
'guest' => null,
'member' => 'guest',
'mentor' => 'member',
'board' => 'mentor',
'admin' => 'board',
),
'resources' => array(
'allow' => array(
'Register\Controller\Profile' => array(
'index' => 'guest',
'confirm' => 'member',
'process' => 'guest',
'edit' => 'member',
'saveEdit' => 'member',
'family' => 'member',
'delete' => 'member',
),
'Register\Controller\Index' => array(
'index' => 'guest',
'profile' => 'guest',
'login' => 'guest',
),
...and so forth for each controller and action (no other resources are included)
Here is the page layout template, default-layout.phtml showing the only javascript I use or pull in:
<?php echo $this->doctype(); ?>
<html lang="en">
<head>
<meta charset="utf-8">
<?php echo $this->headTitle('TJLA Registration')->setSeparator(' - ')->setAutoEscape(false) ?>
<?php echo $this->headMeta()
->appendName('viewport', 'width=device-width, initial-scale=1.0')
->appendHttpEquiv('X-UA-Compatible', 'IE=edge')
?>
<!-- Styles -->
<?php echo $this->headLink(array('rel' => 'shortcut icon', 'type' => 'image/vnd.microsoft.icon', 'href' => $this->basePath() . '/img/tjla-tree.png'))
->prependStylesheet($this->basePath() . '/css/style.css')
->prependStylesheet($this->basePath() . '/css/bootstrap-theme.min.css')
->prependStylesheet($this->basePath() . '/css/bootstrap.min.css');
?>
</head>
<body>
<div class="masthead">
</div>
<nav class="navbar navbar-default" role="navigation">
<div class="container navbar-container">
<div class="navbar-header">
</div>
<div class="collapse navbar-collapse">
<?php echo $this->navigation('navigation')->menu()->setUlClass('nav navbar-nav'); ?>
</div><!--/.nav-collapse -->
</div>
</nav>
<div class="container">
<?php echo $this->content; ?>
<hr>
<footer>
<p>© <?php echo date('Y') ?> by Thomas Jefferson Leadership Academy. All rights reserved.</p>
</footer>
</div> <!-- /container -->
<!-- Scripts -->
<?php echo $this->inlineScript()
->appendFile($this->basePath() . '/js/jquery.min.js')
->appendFile($this->basePath() . '/js/bootstrap.min.js')
->appendFile($this->basePath() . '/js/respond.min.js', 'text/javascript', array('conditional' => 'lt IE 9',))
->appendFile($this->basePath() . '/js/html5shiv.js', 'text/javascript', array('conditional' => 'lt IE 9',));
?>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>

Please excuse me for wasting your time. I discovered the problem; the page was overwritten with a previous version and the proper class was missing from the anchors. (role="button" class="btn btn-xs btn-primary")

how to properly replace a hover with off-canvas menu

I have a theme with two toggle menu options (standard and mobile with hover effect).I'm trying to replace the hover with an off-canvas menu solution taking in consideraion this described procedure.
After I've updated the css style code using the custom css field option, I've uploaded to the server and registered in script-calls.php(instead of calling in footer.php) classie.js and sidebarEffects.js files :
...
// Main Scripts
function register_js() {
if (!is_admin()) {
$url_prefix = is_ssl() ? 'https:' : 'http:';
// Register
wp_register_script('classie', THB_THEME_ROOT . '/assets/js/plugins/classie.js', 'jquery', null, TRUE);
wp_register_script('sidebarEffects', THB_THEME_ROOT . '/assets/js/plugins/sidebarEffects.js', 'jquery', null, TRUE);
// Enqueue
wp_enqueue_script('classie');
wp_enqueue_script('sidebarEffects');
wp_localize_script( 'app', 'themeajax', array( 'url' => admin_url( 'admin-ajax.php' ) ) );
}
}
...
The original theme mobile menu section in header.php looks like this:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="wrapper" class="open">
<!-- Start Mobile Menu -->
<nav id="mobile-menu">
<div class="menu-container custom_scroll">
<div class="menu-holder">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'mobile-menu sf-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="mobile-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</div>
<div class="menu-footer">
<?php echo do_shortcode($menu_footer); ?>
<?php if (ot_get_option('menu_ls') == 'on') { do_action( 'thb_language_switcher' ); } ?>
</div>
</div>
<div class="spacer"></div>
</nav>
<!-- End Mobile Menu -->
<!-- Start Quick Cart -->
<?php do_action( 'thb_side_cart' ); ?>
<!-- End Quick Cart -->
<!-- Start Loader -->
<div class="preloader"></div>
<!-- End Loader -->
<!-- Start Header -->
<header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">
<div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">
<?php if ($header_style == 'style2') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php if ($header_style != 'style2') { ?>
<div class="small-7 medium-4 columns logo">
<?php if ($header_style == 'style1') { ?>
<a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"
title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"
rel="home"><?php bloginfo( 'name' ); ?>
</a>
<?php } ?>
</div>
<?php } ?>
<div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
<?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
<?php if ($full_menu_true) { ?>
<nav id="full-menu" role="navigation">
<?php if ($page_menu) { ?>
<?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else if(has_nav_menu('nav-menu')) { ?>
<?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
<?php } else { ?>
<ul class="full-menu">
<li>Please assign a menu from Appearance -> Menus</li>
</ul>
<?php } ?>
</nav>
<?php } ?>
<?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
<?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
<a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
<div>
<span></span><span></span><span></span>
</div>
</a>
</div>
</header>
<!-- End Header -->
...
(not so sure if it's ok), I've modified/replaced the above section with:
...
<body <?php body_class($class); ?> data-url="<?php echo esc_url(home_url()); ?>" data-cart-count="<?php if($woocommerce) { echo $woocommerce->cart->cart_contents_count; } ?>" data-sharrreurl="<?php echo THB_THEME_ROOT; ?>/inc/sharrre.php">
<div id="st-container" class="st-container">
<!-- content push wrapper -->
<div class="st-pusher">
<nav class="st-menu st-effect-1" id="menu-1">
<!-- sidebar content -->
</nav>
<div id="st-trigger-effects"><button data-effect="st-effect-3">Menu</button></div>
<div class="st-content"><!-- this is the wrapper for the content -->
<div class="st-content-inner"><!-- extra div for emulating position:fixed of the menu -->
<!-- Start Mobile Menu -->
<nav id="primary-navigation" class="st-menu st-effect-3" id="menu-3" role="navigation">
<h1 class="menu-toggle"><?php _e( 'Primary Menu', 'notio-wp' ); ?></h1>
<a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'notio-wp' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav>
<!-- End Mobile Menu -->
...
Also in footer.php I've closed these divs:
...
</div><!-- /st-content-inner -->
</div><!-- /st-content -->
</div><!-- /st-pusher -->
</div><!-- /st-container -->
</body>
</html>
Unfortunately, my result is not functional.The final goal is to obtain the off-canvas menu effect on the right side as alternative to the hover menu, using the existing toggle menu option (between off-side and standard menu), also using the existing burger menu button (when off-canvas is activated). Any thoughts or any other solution with the same effect will be much appreciated.Thanks

I want to apply an external js file that will autohide my navigation bar

I want to apply a js I found here on stackoverflow to my navigation bar. This is aimed to autohide it after a moment of inactivity. But I dont know how to include and apply the code to my navigation bar.
This is how my html goes
<div class="basic-wrapper">
<a class="btn responsive-menu pull-right" data-toggle="collapse" data-target=".navbar-collapse">
<i class='icon-menu-1'></i>
</a>
<a class="navbar-brand" href="<?php echo home_url(); ?>">
<?php
if( get_option('custom_logo') ){
echo '<img src="'. get_option('custom_logo') .'" alt="" data-src="'. get_option('custom_logo') .'" data-ret="'. get_option('custom_logo_retina') .'" class="retina" />';
} else {
echo bloginfo('title');
echo '<br /><small>';
echo bloginfo('description');
echo '</small>';
}
?>
</a>
</div>
<div class="collapse navbar-collapse pull-right">
<?php
if ( has_nav_menu( 'primary' ) ){
wp_nav_menu(
array(
'theme_location' => 'primary',
'depth' => 3,
'container' => false,
'container_class' => false,
'menu_class' => 'nav navbar-nav',
'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
'menu_id' => 'ebor-main-menu',
'walker' => new ebor_bootstrap_navwalker()
)
);
} else {
echo 'Set up a navigation menu now';
}
if( get_option("header_social_link_1") )
get_template_part('loop/loop','socialheader');
?>
</div>
</div><!--/.container-->
</div><!--/.nav-collapse -->
This is the code I found-
$("div").hide();
$("html").mousemove(function( event ) {
$("div").show();
myStopFunction();
myFunction();
});
function myFunction() {
myVar = setTimeout(function(){
$("div").hide();
}, 1000);
}
function myStopFunction() {
if(typeof myVar != 'undefined'){
clearTimeout(myVar);
}
}

If you are asign how to include an external javascript file, you need to do the following:
<script src="//path/to/external/js/file.js"></script>
As for the actual JS code, i dont think that will give you what you are looking for, as it will hide ALL DIVs on the page.
You'd want to replace that with something like. $("div#IDofMenuContatiner")...