Multiple Bootstrap 3 accordions on same page close all when opening one - bootstrap-accordion

I have multiple Bootstrap 3 accordions on the same page, and everything is working fine, have unique ID's, etc. but am not able to figure out how to close all of them when opening one without writing tons of jQuery. Is that my only option?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<section id="home-introductions">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-3">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
Introductions to AT&T BusinessDirect®
</a>
</h4>
</div>
<div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-3">
<div class="panel-body">
<h4>AT&T VPN (AVPN) Services Overview</h4>
<p>Learn how to access, navigate, and understand the standard applications available on AT&T BusinessDirect for AT&T VPN (AVPN) service. The high level overview covers standard applications including Report & Track Troubles, AT&T
BusinessDirect Map, AVPN Performance Reporting, Business Connections collaboration tool and the billing and Service Level Agreement (SLA) tools. This provides the basis for exploring the AT&T BusinessDirect applications in more detail
and allows you to understand how AT&T BusinessDirect can best help your business.</p>
<hr>
<h4>AT&T BusinessDirect Overview</h4>
<p>Learn how to navigate on AT&T Business Direct to perform online tasks such as ordering, account management, billing, payment, trouble reporting, and network management.</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<section id="home-ebill">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-1">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
AT&T BusinessDirect® eBill
</a>
</h4>
</div>
<div id="collapse-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1">
<div class="panel-body">
<h4>AT&T Order Status Manager (OSM) Overview</h4>
<p>The OSM tool allows you to monitor near real-time order status with a click of the mouse. Easily submit changes and updates to your order. You can update the site address or contact information, and request new circuit installation, turn
up, or expedited dates. Technical details about your order can also be accessed.</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<section id="home-emaintenance">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-4">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-4" aria-expanded="false" aria-controls="collapse-4">
eMaintenance
</a>
</h4>
</div>
<div id="collapse-4" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-4">
<div class="panel-body">
<h4>Report and Track Troubles</h4>
<p>This innovative tool enables you to perform trouble reporting tasks online and thereby speed trouble isolation and resolution for your AT&T Services.</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<section id="home-toll-free-routing">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-5">
<h5 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-5" aria-expanded="false" aria-controls="collapse-5">
Toll-Free Routing Tools
</a>
</h5>
</div>
<div id="collapse-5" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-5">
<div class="panel-body">
<h5>Voice Management Tools – AT&T Route It!® (Web-Based) on AT&T BusinessDirect®</h5>
<p>Learn the differences between AT&T Route It! (PC-Based) and AT&T Route It! (Web-Based) on AT&T BusinessDirect. Learn how to provision IP toll-free (IPTF) terminations and manage IPTF features. It is assumed that attendees have
knowledge of AT&T Route It! (PC-Based). There will be time for questions at the end of each session.</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<section id="home-performance-reporting">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-6">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-6" aria-expanded="false" aria-controls="collapse-6">
Performance Reporting
</a>
</h4>
</div>
<div id="collapse-6" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-6">
<div class="panel-body">
<h4>View Business Reports and Information – Transport AT&T Virtual Private Network (AVPN)</h4>
<p>Learn how to access and view the View Business Reports & Information tool for Transport and/or Managed AVPN Service. This application provides performance reporting that allows you to analyze your AVPN Services quickly and easily. You
will become familiar with how to view current or historical performance to help you make informed decisions about your network. You’ll also learn how to run monthly, weekly, daily, hourly, and 10-minute reports for analysis. The reports
include the following information on your Transport AVPN: MPLS Port List, Port Utilization, COS Utilization, and COS Policing. These reports can be downloaded in a variety of formats.</p>
<p>View course dates and times</p>
<hr>
<h4>View and Analyze Inventory</h4>
<p>Learn how the View and Analyze Inventory tool enables you to view current or pending inventory – and download it into your own database. You’ll learn how to display over 40 items, such as access circuit ID, master customer number (MCN),
group revenue code (GRC), address information, and circuit speed.</p>
<p>View course dates and times</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<section id="home-performance-reporting">
<div class="container">
<div class="row-fluid">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="heading-7">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-7" aria-expanded="false" aria-controls="collapse-7">
FirstNet
</a>
</h4>
</div>
<div id="collapse-7" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-7">
<div class="panel-body">
<h4>First Net Test One</h4>
<p>Explore the history of the classic Lorem Ipsum passage and generate your own text using any number of characters, words, sentences or paragraphs. Commonly used as placeholder text in the graphic and print industries, Lorem Ipsum’s origins
extend far back to a scrambled Latin passage from Cicero in the middle ages.</p>
<hr>
</div>
</div>
</div>
</div>
<!--/panel-group-->
</div>
</div>
</section>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Related

The page has expired due to inactivity

What's up guys!
I developed a system locally and it worked perfectly. When I put the system on the web server it started to give this error.
The page has expired due to inactivity.
I would not like to put the routes as an exception from csrf. One reason is that the system will be accessed by several people
The server has the required permissions on the storage folder.
My head:
<meta name="csrf-token" content="{{csrf_token()}}"/>
My form looks like this:
<form id="login" role="form" method="post" autocomplete="off" action="{{route('postLogar')}}">
{{csrf_field()}}
<div class="col-md-12">
<div class="row">
<div class="col-xs-6 col-md-6">
<input type="text" id="nr_cpf" name="nr_cpf" class="form-control input-lg"
value="" placeholder="CPF" maxlength="11" onBlur="validarCPF(this.value);" required/>
</div>
<div class="col-xs-6 col-md-6">
<input type="text" id="nr_matricula" name="nr_matricula" class="form-control input-lg"
value="" placeholder="Matrícula" maxlength="8" style="text-transform: capitalize" required/>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6 col-md-6">
<input type="password" id="ds_senha" name="ds_senha" class="form-control input-lg"
value="" placeholder="Senha" minlength='10' maxlength="10" required/>
</div>
<div class="col-xs-6 col-md-6">
</div>
</div>
<br>
<div class="row">
<div class="col-xs-3 col-md-3">
</div>
<div class="col-xs-6 col-md-6">
<button class="btn btn-success btn-block btn-lg" type="submit">
Entrar
</button>
</div>
<div class="col-xs-3 col-md-3">
</div>
</div>
</div>
My route:
Route::post('/logar', 'ViewController#postLogar')->name('postLogar');
Session.php
'driver' => env('SESSION_DRIVER', 'file'),
'secure' => env('SESSION_SECURE_COOKIE', false),
'domain' => env('SESSION_DOMAIN', null),
I have other laravel systems running on that same web server and they all work normally.
I have no idea what may be happening.
Your laravel project directory might not have correct permissions to store the session stuff. Try giving correct permissons to these directories.
sudo chmod -R 777 storage
sudo chmod -R 777 bootstrap/cache
Navigate to your project root directory in Terminal / Command Promt and run these commands.
I discovered what was causing the problem on my system.
I Refined the Forms Request Part.
I used to do this before:
$nr_cpf = Input::get('nr_cpf_servidor');
I modified the code for this:
$nr_cpf = $request->nr_cpf;
Passing the request as object.
With this change ended up working my code. I do not know if the old form was giving conflict. But now it's working perfectly.

Angular: Show inputs on form based on previous selection or input

I'm using VMware's clarity-seed repo and I'm attempting to build an input form that prompts for additional related information. For example, the form has a pull down list selection for authentication type. Depending on the type I may need more information and that information is specific to the type. "None" auth needs no more information. "Basic" requires user and password combo while "OAuth" wants an API token.
I tried using ng-switch with no luck - the text is showing for both options despite the selection (I'm just using text for now and will add the sub-form details later).
I take it that my use of the form fields is wrong somehow, but I can't figure out why and how.
<form>
<section class="form-block">
<span>New Endpoint</span>
<div class="form-group">
<label for="endpoint.name" class="required">Name</label>
<input type="text" id="endpoint.name" size="45">
</div>
<div class="form-group">
<label for="endpoint.id">Description</label>
<input type="text" id="endpoint.id" size="45">
</div>
<div class="form-group">
<label for="endpoint.url" class="required">URL</label>
<input type="url" id="endpoint.url" placeholder="http://endpoint.co/api" size="35">
</div>
<div class="form-group">
<label for="endpoint.authType">Authentication</label>
<div class="select" class="required">
<select id="endpoint.authType">
<option>None</option>
<option>Basic</option>
<option>OAuth</option>
</select>
</div>
</div>
<div ng-switch="endpoint.authType">
<div ng-switch-when="Basic">
<h1>Another form for Basic credential set</h1>
</div>
<div ng-switch-when="OAuth">
<h1>Another form for OAuth token</h1>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</section>
You can use the new syntax for *ngIf - then ;else:
<div *ngIf="endpoint.authType === 'Basic'"; then basic; else auth>
<ng-template #basic>
<h1>Another form for Basic credential set</h1>
</ng-template>
<ng-template #auth>
<h1>Another form for OAuth token</h1>
</ng-template>
</div>
Docs
If you have more than two values, you can still use ngSwitch:
<div [ngSwitch]="conditionExpression">
<ng-template [ngSwitchCase]="case1Exp">...</ng-template>
<ng-template ngSwitchCase="case2LiteralString">...</ng-template>
<ng-template ngSwitchDefault>...</ng-template>
</div>
Docs

CMS theme. "404 not found" on any link click

Well, this is the code included in Header.html on my site. Whenever I click on Topics, Home, or any link that leads to (www.mywebsite/THElink) I get a 404 page not found. However, on the demo of the CMS theme, those links give information taken from MySQL Db which also I have configured right.
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li {if isset($is_home) AND $is_home eq 1}class="active" {/if}>Home</li>
<li {if isset($is_topics) AND $is_topics eq 1}class="active"{/if}>Topics</li>
<li {if isset($is_authors) AND $is_authors eq 1}class="active"{/if}>Authors</li>
</ul>
<ul class="nav navbar-nav navbar-right search-nav">
<li class="search-form">
<form method="GET" action="./search/">
<div class="input-group">
<input type="text" name="q" class="form-control" placeholder="Search Quotes" {if isset($is_search) AND $is_search eq 1}value="{$q}"{/if} />
<span class="input-group-addon"><button type="submit" class="btn-link"><span class="fa fa-search"></span></button></span>
</div>
</form>
</li>
</ul>
</div>
it's just an issue of .htaccess file. This particular file has huge impact on the whole site.

Angular JS bindings seem to stop working inside of ng-include

I'm using angular js. When I have a snippet that I put in ng-include instead of outright writing the html to the same file, the former doesn't seem to pick up my bindings for my input fields.
In other words, if the following snippet:
<form name="pickupForm" ng-submit="completeCheckoutPickup()" novalidate>
<div class="row checkout-input">
<div class="col-sm-12">
<div class="title">
PICK UP DATE & TIME
</div>
<span class="glyphicon glyphicon-calendar date-icon-color"></span>
<input type="date" ng-model="userDate" required>
<span class="glyphicon glyphicon-time date-icon-color"></span>
<input type="time" ng-model="userTime" required>
</div>
</div>
</form>
is included as
<div ng-include src="'/templates/account/checkout/checkout.pickup.desktop.html'"></div>
The angularjs bindings for the ng-model stop working.
Any ideas?
enter code here

schema.org markup and nesting for Review of "ApartmentComplex"

I have some structured data implemented in my website using microdata so that Google and other search engines could parse it and show appropriate rich snippets. I have added the appropriate markup for all the microdata tags that I have used but I am unable to view the rich snippets for my website while testing it using the Rich Snippets Testing Tool. I have gone through the usage guidelines and frequent issues section at the Google Webmaster but to no avail.
Upon debugging the html I found that the following snippet was successfully showing rich snippets when fed to the Rich Snippets Testing Tool.
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h1><span itemprop="name">T Park </span></h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="address">
<span itemprop="streetAddress">1 Scenic Park</span>
<span itemprop="postalCode" class="hidden">123456</span>
<span itemprop="addressRegion" class="hidden">Central </span>
<span itemprop="addressCountry" class="hidden">Singapore</span>
</div>
</div>
</div>
</div>
<div class="col-sm-6 box-map">
<h2>Location</h2>
</div>
<div style="margin-bottom:0px;" itemprop="review" itemscope itemtype="http://schema.org/Review" class="jumbotron row">
<h2>T Park Reviews</h2>
<br>
<meta itemprop="itemReviewed" content="T Park">
<div id="reviews" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="9">
<meta itemprop="bestRating" content="10"><span>Rating: 9/10</span>
</div>
<br><span itemprop="reviewBody">Lorem Ipsum....</span>
<br><strong itemprop="author" class="row pull-right">John May</strong>
</div>
However as soon as an enclosing markup of ApartmentComplex is added as shown in the snippet below, the rich snippet is not visible.
<div itemscope itemtype="http://schema.org/ApartmentComplex" class="container">
<div class="row">
<div class="col-sm-12">
<div class="page-header">
<h1><span itemprop="name">T Park </span></h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="address">
<span itemprop="streetAddress">1 Scenic Park</span>
<span itemprop="postalCode" class="hidden">123456</span>
<span itemprop="addressRegion" class="hidden">Central</span>
<span itemprop="addressCountry" class="hidden">Singapore</span>
</div>
</div>
</div>
</div>
<div style="margin-bottom:0px;" itemprop="review" itemscope itemtype="http://schema.org/Review" class="jumbotron row">
<h2>T Park Reviews</h2>
<br>
<meta itemprop="itemReviewed" content="T Park">
<div id="reviews" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="9">
<meta itemprop="bestRating" content="10"><span>Rating: 9/10</span>
</div>
<br><span itemprop="reviewBody">Lorem Ipsum....</span>
<br><strong itemprop="author" class="row pull-right">John May</strong>
</div>
</div>
So assuming my page is about ApartmentComplex, and I want to include a Review of it, how should I structure/nest this markup?
I don't think there's anything wrong with your mark-up or Microdata. I just don't think that the Google Structured Data tool shows any rich snippets for http://schema.org/ApartmentComplex types - rich snippets are only available for certain schema.org types.
To prove this, change the wrapping ApartmentComplex type to a Product type, and remove the address (which isn't part of "Product") and you'll see that a rich snippet is produced in the Google Structured Data Testing Tool (because Google do show rich snippets for Products).
Edit to add: this is a possible workaround - Google will show rich snippets for schema.org types where the surrounding type is a Review, so you could use Review as the top-level type, then have the ApartmentComplex type as the "itemReviewed" property - this works in the Google Structured Data Testing Tool:
<div itemscope itemtype="http://schema.org/Review" class="container">
<div class="row" itemprop="itemReviewed" itemscope itemtype="http://schema.org/ApartmentComplex">
<div class="col-sm-12">
<div class="page-header">
<h1><span itemprop="name">T Park </span></h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress" class="address">
<span itemprop="streetAddress">1 Scenic Park</span>
<span itemprop="postalCode" class="hidden">123456</span>
<span itemprop="addressRegion" class="hidden">Central</span>
<span itemprop="addressCountry" class="hidden">Singapore</span>
</div>
</div>
</div>
</div>
<div style="margin-bottom:0px;" class="jumbotron row">
<h2>T Park Reviews</h2>
<br>
<div id="reviews" itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content="1">
<meta itemprop="ratingValue" content="9">
<meta itemprop="bestRating" content="10"><span>Rating: 9/10</span>
</div>
<br><span itemprop="reviewBody">Lorem Ipsum....</span>
<br><strong itemprop="author" class="row pull-right">John May</strong>
</div>
</div>