We Keep Coding

wpbakery Accordion tab auto open when clicking the anchor link

I'm new to this section. I'm using a wordpress homepage and use wpbakery for creating my content.
My specific problem is that I have an accordion but cannot open it automatically.
That's what I did: created an accordion with different tabs. I wanna use a link like test.com\accordion#tab2 open the side and automatically the right tab2 of the accordion. Anyone know the code of JS I could use to solve this?
<div class="wpb_column vc_main_column vc_column_container vc_col-sm-12 typo-default">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="vc_tta-container" data-vc-action="collapse">
<div class="vc_general vc_tta vc_tta-tabs vc_tta-color-grey vc_tta-style-classic vc_tta-shape-rounded vc_tta-spacing-1 vc_tta-tabs-position-top vc_tta-controls-align-left">
<div class="vc_tta-tabs-container">
<ul class="vc_tta-tabs-list">
<li class="vc_tta-tab vc_active" data-vc-tab="">
<a href="#tabid1" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid2" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</li>
<li class="vc_tta-tab" data-vc-tab="">
<a href="#tabid3" data-vc-tabs="" data-vc-container=".vc_tta">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</li>
</ul>
</div>
<div class="vc_tta-panels-container">
<div class="vc_tta-panels">
<div class="vc_tta-panel vc_active" id="tabid1" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid1" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 1</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text1</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid2" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid2" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 2</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text2</p>
</div>
</div>
</div>
</div>
<div class="vc_tta-panel" id="tabid3" data-vc-content=".vc_tta-panel-body">
<div class="vc_tta-panel-heading">
<h4 class="vc_tta-panel-title">
<a href="#tabid3" data-vc-accordion="" data-vc-container=".vc_tta-container">
<span class="vc_tta-title-text">Tab 3</span>
</a>
</h4>
</div>
<div class="vc_tta-panel-body" style="height: 0px;">
<div class="wpb_text_column wpb_content_element ">
<div class="wpb_wrapper">
<p>text3</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

How align button to right in framework7

Sorry for my elementary question, but I have spent a lot of time and I can't understand the mistake. I have a card and I'd like to show the button on the right inside the card footer. Now the button is displayed on the left.
Thank you in advance!
This is my HTML page where I have the card
<div class="row">
<div class="col-100 tablet-auto desktop-auto">
<div class="card">
<div class="card-content card-content-padding">
<div class="row">
<div class="col-100 tablet-auto desktop-80">
<div class="list">
<ul>
<li>
<!--<a class="item-link smart-select smart-select-init">-->
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits1" data-page-back-link-text="Indietro">
<select name="fruits1">
<option value="">apple</option>
<option value="">banana</option>
</select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 1</div>
</div>
</div>
</a>
</li>
<li>
<a href="#" class="item-link smart-select smart-select-init" data-open-in="popup" data-virtual-list="fruits2" data-page-back-link-text="Indietro">
<select name="fruits2"> </select>
<div class="item-content">
<div class="item-inner">
<div class="item-title">Fruits 2</div>
</div>
</div>
</a>
</li>
</ul>
</div>
<!-- ./ list -->
</div>
<!-- ./ block -->
</div>
<!--col-->
</div>
<!--row-->
</div>
<!--card-content-->
<div class="card-footer">
<div class="row justify-content-right">
<div class="col text-align-right">
<a class="button button-fill" href="#">Search</a>
</div>
</div>
</div>
<!--card-footer-->
</div>
<!--card-->
</div>
<!--col-->

You can resolve issue by distribute a footer to two section, one for left, and second one for right, or by custom style....
You can update your code by adding empty span before your button, then the card footer will display your button in right...
Look at this demo.
<div class="card">
<div class="card-header">Card header</div>
<div class="card-content card-content-padding">Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions.</div>
<div class="card-footer"><span></span><a class="button button-fill" href="#">Search</a>
</div>

Error with ui-sref

I am getting an error for the first ui-sref inside div with class="row episode-link" although the rest work correctly:
Syntax Error: Token '}' not a primary expression at column 12 of the expression [{seriesId: }] starting at [}].
The same ui-sref if put anywhere in the rest of the html structure works perfectly.
Unable to track the bug. Please Help.
<section>
<div class="container-fluid">
<div class="row episode-link">
<a ui-sref="app.episode({seriesId: {{show._id}}})">
<div class="col-md-12 guide">
<span class="fa fa-chevron-right" style="float: right;"></span>
<h5>Episode Guide</h5>
<p>{{episodes.length}} episodes</p>
</div>
</a>
</div>
<div class="row">
<div class="col-md-12">
<div class="seriesjumbo jumbotron">
<div class="row">
<div class="col-md-4 show-img-div align-items-center">
<img class="show-img" src="{{show.poster}}" alt="{{show.seriesName}}">
</div>
<div class="col-md-8">
<h1>{{show.seriesName}}</h1>
<p class="episode-info"><i class="fa fa-calendar" aria-hidden="true"></i><span>{{show.firstAired | date: 'mm/dd/yyyy'}}</span></p>
<p class="info">{{show.network}} <span class="rating"><i class="fa fa-star fa-lg star" aria-hidden="true"></i> {{show.rating}}</span></p>
<p class="info"><em>{{show.airsDayOfWeek}}s, {{show.airsTime}} GMT </em></p>
<div class="cap">
<span class="label label-default" ng-repeat="genre in show.genre">{{genre}}</span>
</div>
<div class="menus"><span class="fa fa-list"></span></div>
<div class="menus"><span class="fa fa-heart"></span></div>
<div class="bookmark"><span class="fa fa-bookmark"></span></div>
<div class="menus"><span class="fa fa-star"></span></div>
<div>
<h3>Overview </h3>
<p>{{show.overview}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<uib-tabset active="active">
<uib-tab index="0" heading="Episodes">
<div class="row">
<div class="col-md-6">
<h5>Seasons</h5>
<ul class="season-list">
<li ng-repeat="season in seasons | orderBy: '-valueOf()'"><a ui-sref="app.episode({seriesId: {{show._id}}, season: {{season}}})">{{season}}</a></li>
</ul>
</div>
<div class="col-md-6">
<h5>Years</h5>
<ul class="season-list">
<li ng-repeat="year in firstAired | orderBy:'-toString()'"><a ui-sref="app.episode({seriesId: {{show._id}}, year: {{year}}})">{{year}}</a></li>
</ul>
</div>
</div>
</uib-tab>
<uib-tab index="1" heading="Fan Arts">
<div ui-view="fan_arts"></div>
</uib-tab>
</div>
</div>
</div>
</section>

Click on div, show a modal that has image and text (overwriting on a template) and work as slideshow

I am trying to make this div class "box-1" to pop-up a modal when someone clicks on it. In the modal, there will be a header, an image, and some text will show up in the modal.
<div class="container">
<div class="row">
<div class="grid_12">
<h2 class=" wow fadeInUp" style="color: #000; font-weight: bold;">Lorem Ipsum</h2>
<div class="row">
<div class="grid_3">
<div class="box-1 wow fadeInDown">
<span class="skill-number" data-from="0" data-to="8" data-speed="0.5" ></span>
<span class="skill-title">performance Awards </span>
</div>
</div>
<div class="grid_3">
<div class="box-1 wow fadeInDown">
<span class="skill-number" data-from="0" data-to="8" data-speed="0.5" ></span>
<span class="skill-title">performance Awards </span>
</div>
</div>
<div class="grid_3">
<div class="box-1 wow fadeInDown">
<span class="skill-number" data-from="0" data-to="8" data-speed="0.5" ></span>
<span class="skill-title">performance Awards </span>
</div>
</div>
</div>
</div>
</div>
</div>
The codes I have tried works fine independently, but when I put it inside the template code, all the other code breaks if it works. I am trying to make the statistics section 'box-1' class div and 'service-box' div to work as a modal. template link
here are some of the links I have tried but did not work on the template. [jQuery pop-up overlay][2]

Boostrap tooltip triggers hover event on parent element when pointer is on it before it is hidden

So I have this markup
<div class="col-md-12 hypoteka" id="hypoteka1">
<div class="row">
<div class="clickable">
<div class="col-md-2">
<div class="row text-center">
<div class="col-md-offset-2 col-md-8">
<img src="whaever.jpg" class="img-responsive">
</div>
</div>
<div class="row">
<h3 class="text-center banka">whaever.</h3>
</div>
<div class="row text-center">
<i class="fa fa-3x fa-chevron-right"></i>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-6 text-center splatka" title="Splátka" data-toggle="tooltip">
<span class="hodnota">730</span>€ / mes.
</div>
<div class="col-md-6 fixacia text-center" title="Fixácia" data-toggle="tooltip">
<i class="fa fa-hourglass"></i>
<span class="hodnota">2</span>roky
</div>
</div>
<div class="row">
<div class="col-md-6 text-center urok" title="Úrok" data-toggle="tooltip">
<i class="fa fa-line-chart"></i>
<span class="hodnota">1,85</span>%
</div>
<div class="col-md-6 preplatenie text-center" title="Preplatenie"
data-toggle="tooltip">
<i class="fa fa-plus"></i>
<span class="hodnota">7 900</span>€
</div>
</div>
</div>
</div>
<div class="col-md-2">
<div class="row">
<p class="hodnotenie-text text-center">Hodnotenie</p></div>
<div class="row">
<p class="hodnotenie-cislo text-right">8/10</p></div>
<div class="row text-center">
<i class="fa fa-2x fa-balance-scale"></i>
<input type="checkbox">
</div>
</div>
</div>
</div>
</div>
and this js
$('.clickable').hover(function (e) {
$(this).find('.fa-chevron-right').toggleClass('fa-5x call-to-action');
});
$('[data-toggle="tooltip"]').tooltip({
placement: 'bottom'
});
I captured the behavior here
As you can see in the video, when the pointer hovers over the bootstrap tooltip before the animation finishes hiding it, it triggers the hover event on the clickable div.
I tried doing e.preventDefault() on hidden.bs.tooltip but does nothing. I cannot explain it. Any help?

I think it's because the bootstrap tooltip is not created inside the .clickable container on which your hover action is defined.
When you mouse over the tooltip, you are moving outside the .clickable container, and so when you move mouse out from the tooltip, the hover event is fired again.
This can be seen better if you add a delay to the tooltip (example - 2 sec delay when showing/hiding tooltips). Try moving your mouse over and out of the tooltips before they disappear.