I have these tabs working with no issues. The only thing is every time I click on each tab the page moves to the top. Is there any way of stopping this?
I have read previous posts and I thought the issue was to do with having <a href="#" so I have removed this. So now it is using data-tab but its still jumping to the top.
$('ul.tabs__list li').click(function(){
var tab_id = $(this).attr('data-tab'), $ct = $(this).closest('.tabs');
$ct.find('ul.tabs__list li.current').removeClass('current');
$ct.find('.tabs__content.current').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
$(window).trigger('resize');
});
HTML
<div class="tabs tabs--hero">
<div class="container">
<ul class="tabs__list clear">
<li class="tabs__list--item ademi caps align-center current" data-tab="panel-1">
Containment strategy
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-2">
Aseptic Systems
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-3">
Standard Systems
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-4">
Mobile Clean Rooms
</li>
<li class="tabs__list--item ademi caps align-center" data-tab="panel-5">
Spare Parts
</li>
</ul>
</div>
<div class="section background--white">
<div class="container">
<div id="panel-1" class="tabs__content current">
<div class="group">
<div class="col4">
<div class="feature">
<h2 class="ademi delta primary caps line line__left line--secondary">Restricted Access Barrier Systems (RABS)</h2>
<p class="beta beta--leading">Our innovative RABS provide protection by delivering a physical and aerodynamic barrier over a critical process zone with easier access to the process in the event when intervention is required and can be used for many applications in a fill finish area.</p>
View Products<i class="icon icon-rounded-arrow-pointing-to-the-right beta"></i>
</div>
</div>
<div class="col8">
<div class="feature__slider">
<ul class="slideshow">
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
<p class="slideshow__caption alpha">Designed to provide an ergonomic and practical alternative More Details</p>
<p class="vertical-text slideshow__vertical-text alpha caps">Cell Therapy</p>
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
<li>
<div>
<img src="/assets/img/testing/image-683x491px.jpg" alt="testing" />
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="panel-2" class="tabs__content">
Aseptic Systems content
</div>
<div id="panel-3" class="tabs__content">
Standard Systems content
</div>
<div id="panel-4" class="tabs__content">
Mobile Clean Rooms content
</div>
<div id="panel-5" class="tabs__content">
Spare Parts content
</div>
</div>
</div>
</div>
I think no problem in your TAB js code. just add e.preventDefault();.
$('ul.tabs__list li').click(function(e){
e.preventDefault();
//code goes here.
}
add to function argument e and inside function write e.preventDefault();
Related
I'm trying to display cards in my dom but in the text im showing there is some code as shown in the picture below
<div class="app">
<h1> All Fishes and Their Photos</h1>
<ul v-for="(fish, i) in fishes" :key="i" />
<li>
<div class="maincontainer">
<div class="back">
<p>{{fish['Biology']}}</p>
</div>
<div class="front">
<div class="image">
<img :src="fish['Species Illustration Photo'].src" />
<h2>{{ fish['Species Name']}}</h2>
</div>
</div>
</div>
</li>
</ul>
</div>
Remove the '/' you have at the end of the first <ul> tag, this should fix the problem, but also consider using the v-for on the <li> tag, and not the <ul> tag as
the element that must be repeated many times is <li>.
I want to run a script where I can specifically select ID tag where parameters are _string_n_n where '_string' = release (in this case) and 'n' = are numbers # e.g. _release_8_3
Here's my code... where I wan to run the script and get content of tag where ID matches _string_n_n
<div class="sect2">
<h3 id="_release_8_3">Release 8.3</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_3_1">QA release 8.3.1</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_release_8_2">Release 8.2</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest_2">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest_2">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_2_6">QA release 8.2.6</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Select all elements with an ID containing the following string (in this case _release_:
document.querySelectorAll("[id*='_release_']");
In jQuery: $("[id*='_release_']")
Here are more wildcards if you need a different reaction.
console.dir(document.querySelectorAll("[id*='_release_']"))
<div class="sect2">
<h3 id="_release_8_3">Release 8.3</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_3_1">QA release 8.3.1</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="sect2">
<h3 id="_release_8_2">Release 8.2</h3>
<div class="sect3">
<h4 id="_qa_test_release_1_2_4_to_take_a_look_at_manifest_2">QA TEST release 1.2.4 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_test_release_1_2_3_to_take_a_look_at_manifest_2">QA TEST release 1.2.3 (to take a look at manifest)</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
</ul>
</div>
</div>
<div class="sect3">
<h4 id="_qa_release_8_2_6">QA release 8.2.6</h4>
<div class="ulist">
<ul>
<li>
<p>Release Manifest</p>
</li>
<li>
<p>Bugs fixed in this release</p>
</li>
<li>
<p>Package updates:</p>
<div class="literalblock">
<div class="content">
<pre>user-portal 8.2</pre>
</div>
</div>
</li>
<li>
<p>Database migration scripts to run:</p>
<div class="literalblock">
<div class="content">
<pre>none</pre>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
e.g. _release_8_3
var string = 'release';
var number1 = 8;
var number2 = 3;
var selector = '#_'+ [ string, number1, number2 ].join( '_' );
var element = $(selector);
element = document.querySelector(selector);
element = document.getElementById('_'+ [ string, number1, number2 ].join( '_' ) );
Have you tried any of these?
If instead you are wanting to find all ids that match a pattern, use a class instead. You can do pattern matching in lookups, however it is less performant and javascript will have to examine every single element in the dom to see if it matches your attribute pattern. Instead by giving like patterned id elements the same class, you can perform a class lookup which, along with id and tagName lookups, are some of the fastest lookups your browser can perform.
Otherwise if you feel you absolutely must do this, I would instead try to steer you towards using one of the more efficient selectors, and then using filter to find what you want. For instance in your example it looks like the pattern you gave is associated with h3 elements, so you could do.
$('h3').filter(function(){
return /^[_]release[_][0-9]+[_][0-9]+$/.test(this.id);
});
Provided I got my regex right, this would find all the h3 elements and then filter to return only those that match the pattern _release_#_# where # is any number
I am new to jQuery and see that this question has been asked on several occasion but cannot find the answer within the library.
Why do I continue to get the above error message with such a simple script? All I am trying to do is hide the class 'answer' upon opening of the html page
$(document).ready(function(){
$('#faq-panel > div .answer').hide();
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Form</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<!-- <link href="../css/bootstrap.min.css" rel="stylesheet" > -->
<link href="../css/popups.css" rel="stylesheet" >
<script src="../js/popup.js"></script>
</head>
<body>
<header class="page-title">
<a class="return" href="../"><span>Return</span></a>
<h1>Pricing</h1>
<div><h2>SPECIAL LIMITED-TIME OFFER FOR PRESTO BUSINESS SOLUTION PARTNERS</h2></div>
</header>
<div class="container">
<div class="heading">
<p>We are offering big long-term discounts in 2017 to organisations who are serious about embracing change and want to partner with us to install operational excellence </p>
</div>
<form action="/bat/clientsignup.php" method="post">
<fieldset class="contact clearfix">
<label for="mail"></label>
<div class="signup">
<input type="email" id="mail" name="user_email" placeholder="enter your work e-mail" required>
<button type="submit">Sign up today & try PRESTO free-of-charge</button>
</div>
</fieldset>
</form>
<img class="presto-logo" src="../images/vsm.png">
<!-- <div style="opacity: 1;">
<ul class="subscription-type">
<li>Yearly SAVE 18%</li>
<li> | </li>
<li>Two Yearly SAVE 32%</li>
<li> | </li>
<li>Monthly</li>
</ul>-->
<div class="packages" style="opacity: 1;">
<div class="package basic" data-tier="basic">
<div class="summary">
<div class="title">Basic</div>
<div class="price"> <span class="dollar">€</span><span class="currency fw300"></span> <span class="amount">4</span> <span class="per_month">/ Mo</span><span class="vat"> +VAT</span> </div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 50 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Assess your current state</span></div>
<div class="description">All the essentials you need to identify where waste opportunities exist and ensure your operational support documentation archive is kept in order</div>
</div>
</div>
<div class="features">
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>E-mail product support with 24-hour turn-around time</p></li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>Operational readiness</p></li>
<li><img class="check" src="../images/check.png"><p>Waste identification</p></li>
</ul>
</div>
</div>
</div>
<div class="package standard" data-tier="standard">
<div class="top with_line">Most popular</div>
<div class="summary">
<div class="title">Standard</div>
<div class="price"> <span class="dollar">€</span> <span class="currency fw300"></span> <span class="amount">6</span> <span class="per_month">/ Mo</span><span class="vat"> +VAT</span> </div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 100 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Design target model, assign responsibility & deploy resources</span></div>
<div class="description">Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available</div>
</div>
</div>
<h4 class="basic-plus">Basic plus...</h4>
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>4 hours of video conference consultation with a TOPP TI Lean Six Sigma black belt</p></li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>Kanban project management</p></li>
<!-- <li><img class="check" src="../images/check.png"><p>Best practice interactive corporate newsfeed</li> -->
<li><img class="check" src="../images/check.png"><p>IT functional bug & enhancement tracker</p></li>
<li><img class="check" src="../images/check.png"><p>Support documentation historical tracking</li>
<li><img class="check" src="../images/check.png"><p>Opportunity cost/benefits analysis</li>
<li><img class="check" src="../images/check.png"><p>RACI matrix reporting</p></li>
<li><img class="check" src="../images/check.png"><p>Client demand heat map</li>
</ul>
</div>
</div>
<div class="package pro" data-tier="pro">
<div class="top with_line for_banks">Reccomended to banks</div>
<div class="summary">
<div class="title">Pro</div>
<div class="price"> <span class="dollar">€</span> <span class="currency fw300"></span> <span class="amount">8</span> <span class="per_month">/ Mo</span> <span class="vat"> +VAT</span> </div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 100 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Cross-train, optimise performance & benchmark results</span></div>
<div class="description">Perform risk & control self assessments, maximise knowledge retention and do away with annual reviews by measuring performance in real time. Use Lean logic to capture cycle times & benchmark progress with robust historical data.</div>
</div>
</div>
<h4 class="standard-plus">Standard plus...</h4>
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>10 hours of video conference consultation with a TOPP TI Lean Six Sigma black belt</p></li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>Value Stream Mapping with SIPOC UI </p></li>
<li><img class="check" src="../images/check.png"><p>FTE supply / demand workload profile & RACI</p></li>
<li><img class="check" src="../images/check.png"><p>Risk heat map, integrated calendar & reminder scheduling</li>
<li><img class="check" src="../images/check.png"><p>Risk & control self assessment & EASI opportunity analysis</p></li>
<li><img class="check" src="../images/check.png"><p>Process checklist manager</p></li>
<li><img class="check" src="../images/check.png"><p>Process cycle time & benchmarking manager notebook</li>
<li><img class="check" src="../images/check.png"><p>Skills 4-steps to excellence growth manager</li>
</ul>
</div>
</div>
<div class="package enterprise" data-tier="enterprise">
<div class="summary">
<div class="title">Enterprise</div>
<div class="price"> <span class="dollar">€</span> <span class="currency fw300"></span> <span class="amount">10</span> <span class="per_month">/ Mo</span> <span class="vat"> +VAT</span> </div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 150 users</div>
<div class="tier_blurb dh"> <div class="blurb_title"><span>Install sense of urgency, purpose & best practice awareness</span></div>
<div class="description">Eliminate silo-specific knowledge gaps and install a corporate-wide best practice culture together with a constant discipline to accelerate decision making and the autonomous elimination of ‘low hanging fruits’.
</div>
</div>
</div>
<h4 class="pro-plus">Pro plus...</h4>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li><img class="check" src="../images/check.png"><p>Interactive corporate newsfeed</li>
<li><img class="check" src="../images/check.png"><p>Talent differentiators analytics for leadership, professional, technical and soft skills</p></li>
<li><img class="check" src="../images/check.png"><p>3-tier risk & compliance impact reporting</li>
<li><img class="check" src="../images/check.png"><p>Client special service cost tracker</p></li>
<li><img class="check" src="../images/check.png"><p>KPI tracking & efficiency assessment streamlining</li>
<li><img class="check" src="../images/check.png"><p>Issue management advanced reporting</li>
<li><img class="check" src="../images/check.png"><p>Go-to-Gemba mobile device SIPOC interaction functionality</p></li>
<li><img class="check" src="../images/check.png"><p>PRESTO sense-of-urgency discipline</p></li>
</ul>
</div>
</div>
</div>
</div>
<div class="frequently-asked-questions">
<br>
<div class="container">
<h1>Frequently Asked Questions</h1>
<ul id="faq-panel">
<li>
<div class="question"> How does your pricing work? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> We’re a tiered subscription service, and our pricing is based on the number of people on your team as well as the plan that’s best for you. Check out our handy calculator above to get a personalized quote pronto. </div>
</li>
<li>
<div class="question"> Which plan is right for me? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> That’s a good question and there are a number of factors to consider. Reach out to our Customer Success Team-—we’ll be happy to help you figure it out. </div>
</li>
<li>
<div class="question"> Can I pay monthly? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> Sure. We offer monthly, yearly, and two-yearly plans. A lot of our customers prefer to go for yearly or two-yearly because they’re the most economical choice—you can save up to 32%. But monthly is totally cool, too. </div>
</li>
<li>
<div class="question"> Can I use this for my whole organisation, or just my team? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> Either or both! That’s the beauty of dapulse—we have huge enterprises using it organization-wide as well as one and two-people teams. You’re a small team working inside a huge corporation, you say? That’s good, too. Plenty of our customers use dapulse to improve the way their own team or department operates. </div>
</li>
<li>
<div class="question"> Do you offer discounts? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> We’re happy to offer discounted pricing to nonprofits and NGOs. Or if you can beat us in Street Fighter 2. (But we’re realllllly good… just saying.) Contact our Customer Success Team for more info. </div>
</li>
<li>
<div class="question"> Can I change my plan? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> Totes. You can upgrade, downgrade, or cancel your plan any time you want. </div>
</li>
<li class="faq">
<div class="question"> What type of product support is available? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> The trial is free, but after that, yeah, you’ll need to subscribe to one of our plans to continue using dapulse. Don’t give us that look ;) We’re committed to building an amazing product that provides real and tangible value to you every day. At 16 cents per user a day, our Basic plan sets you back less than a pencil per person. There’s no greater investment than pulling your team together and finding a great way to get work done, and many of our customers tell us that their experience with dapulse is truly invaluable. Imagine never missing another deadline, totally eliminating angry phone calls from clients, or putting an end to painful email threads—for real. Imagine actually enjoying your everyday life at work. Priceless, no? </div>
</li>
<li>
<div class="question"> Who should be the primary users? <img class="caret" src="/images/chevron.png" width="25"> </div>
<div class="answer"> We accept all major credit cards. Some of our developers could probably be bribed with cookies, but you didn’t hear that from us. </div>
</li>
</ul>
</div>
</div>
</body>
</html>
You have to add jQuery library before you use it, try to add the follow reference to the head section.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Just need to add JQuery
$(document).ready(function() {
$('#faq-panel > div .answer').hide();
});
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up Form</title>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">
<!-- <link href="../css/bootstrap.min.css" rel="stylesheet" > -->
<link href="../css/popups.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="../js/popup.js"></script>
</head>
<body>
<header class="page-title">
<a class="return" href="../"><span>Return</span></a>
<h1>Pricing</h1>
<div>
<h2>SPECIAL LIMITED-TIME OFFER FOR PRESTO BUSINESS SOLUTION PARTNERS</h2>
</div>
</header>
<div class="container">
<div class="heading">
<p>We are offering big long-term discounts in 2017 to organisations who are serious about embracing change and want to partner with us to install operational excellence</p>
</div>
<form action="/bat/clientsignup.php" method="post">
<fieldset class="contact clearfix">
<label for="mail"></label>
<div class="signup">
<input type="email" id="mail" name="user_email" placeholder="enter your work e-mail" required>
<button type="submit">Sign up today & try PRESTO free-of-charge</button>
</div>
</fieldset>
</form>
<img class="presto-logo" src="../images/vsm.png">
<div class="packages" style="opacity: 1;">
<div class="package basic" data-tier="basic">
<div class="summary">
<div class="title">Basic</div>
<div class="price"> <span class="dollar">€</span><span class="currency fw300"></span> <span class="amount">4</span> <span class="per_month">/ Mo</span><span class="vat"> +VAT</span>
</div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 50 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Assess your current state</span>
</div>
<div class="description">All the essentials you need to identify where waste opportunities exist and ensure your operational support documentation archive is kept in order</div>
</div>
</div>
<div class="features">
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>E-mail product support with 24-hour turn-around time</p>
</li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>Operational readiness</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Waste identification</p>
</li>
</ul>
</div>
</div>
</div>
<div class="package standard" data-tier="standard">
<div class="top with_line">Most popular</div>
<div class="summary">
<div class="title">Standard</div>
s="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 100 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Design target model, assign responsibility & deploy resources</span>
</div>
<div class="description">Engage your team to align business process responsibilities to their respective owners while performing initial cost benefits analysis on the business opportunities available</div>
</div>
</div>
<h4 class="basic-plus">Basic plus...</h4>
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>4 hours of video conference consultation with a TOPP TI Lean Six Sigma black belt</p>
</li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>Kanban project management</p>
</li>
<!-- <li><img class="check" src="../images/check.png"><p>Best practice interactive corporate newsfeed</li> -->
<li>
<img class="check" src="../images/check.png">
<p>IT functional bug & enhancement tracker</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Support documentation historical tracking</li>
<li>
<img class="check" src="../images/check.png">
<p>Opportunity cost/benefits analysis</li>
<li>
<img class="check" src="../images/check.png">
<p>RACI matrix reporting</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Client demand heat map</li>
</ul>
</div>
</div>
<div class="package pro" data-tier="pro">
<div class="top with_line for_banks">Reccomended to banks</div>
<div class="summary">
<div class="title">Pro</div>
<div class="price"> <span class="dollar">€</span> <span class="currency fw300"></span> <span class="amount">8</span> <span class="per_month">/ Mo</span> <span class="vat"> +VAT</span>
</div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 100 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Cross-train, optimise performance & benchmark results</span>
</div>
<div class="description">Perform risk & control self assessments, maximise knowledge retention and do away with annual reviews by measuring performance in real time. Use Lean logic to capture cycle times & benchmark progress with robust historical data.</div>
</div>
</div>
<h4 class="standard-plus">Standard plus...</h4>
<div class="TOPP-support">
<h5>TOPP TI Support</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>10 hours of video conference consultation with a TOPP TI Lean Six Sigma black belt</p>
</li>
</ul>
</div>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>Value Stream Mapping with SIPOC UI</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>FTE supply / demand workload profile & RACI</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Risk heat map, integrated calendar & reminder scheduling</li>
<li>
<img class="check" src="../images/check.png">
<p>Risk & control self assessment & EASI opportunity analysis</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Process checklist manager</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>Process cycle time & benchmarking manager notebook</li>
<li>
<img class="check" src="../images/check.png">
<p>Skills 4-steps to excellence growth manager</li>
</ul>
</div>
</div>
<div class="package enterprise" data-tier="enterprise">
<div class="summary">
<div class="title">Enterprise</div>
<div class="price"> <span class="dollar">€</span> <span class="currency fw300"></span> <span class="amount">10</span> <span class="per_month">/ Mo</span> <span class="vat"> +VAT</span>
</div>
<div class="bottom" style="display: block;">billed annually</div>
<div class="minimum_users">Minimum 150 users</div>
<div class="tier_blurb dh">
<div class="blurb_title"><span>Install sense of urgency, purpose & best practice awareness</span>
</div>
<div class="description">Eliminate silo-specific knowledge gaps and install a corporate-wide best practice culture together with a constant discipline to accelerate decision making and the autonomous elimination of ‘low hanging fruits’.
</div>
</div>
</div>
<h4 class="pro-plus">Pro plus...</h4>
<div class="TOPP-support">
<h5>Functionality</h5>
<ul>
<li>
<img class="check" src="../images/check.png">
<p>Interactive corporate newsfeed</li>
<li>
<img class="check" src="../images/check.png">
<p>Talent differentiators analytics for leadership, professional, technical and soft skills</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>3-tier risk & compliance impact reporting</li>
<li>
<img class="check" src="../images/check.png">
<p>Client special service cost tracker</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>KPI tracking & efficiency assessment streamlining</li>
<li>
<img class="check" src="../images/check.png">
<p>Issue management advanced reporting</li>
<li>
<img class="check" src="../images/check.png">
<p>Go-to-Gemba mobile device SIPOC interaction functionality</p>
</li>
<li>
<img class="check" src="../images/check.png">
<p>PRESTO sense-of-urgency discipline</p>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="frequently-asked-questions">
<br>
<div class="container">
<h1Frequently Asked Questions</h1>
<ul id="faq-panel">
<li>
<div class="question">How does your pricing work?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">We’re a tiered subscription service, and our pricing is based on the number of people on your team as well as the plan that’s best for you. Check out our handy calculator above to get a personalized quote pronto.</div>
</li>
<li>
<div class="question">Which plan is right for me?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">That’s a good question and there are a number of factors to consider. Reach out to our Customer Success Team-—we’ll be happy to help you figure it out.</div>
</li>
<li>
<div class="question">Can I pay monthly?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">Sure. We offer monthly, yearly, and two-yearly plans. A lot of our customers prefer to go for yearly or two-yearly because they’re the most economical choice—you can save up to 32%. But monthly is totally cool, too.</div>
</li>
<li>
<div class="question">Can I use this for my whole organisation, or just my team?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">Either or both! That’s the beauty of dapulse—we have huge enterprises using it organization-wide as well as one and two-people teams. You’re a small team working inside a huge corporation, you say? That’s good, too. Plenty of our customers use
dapulse to improve the way their own team or department operates.</div>
</li>
<li>
<div class="question">Do you offer discounts?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">We’re happy to offer discounted pricing to nonprofits and NGOs. Or if you can beat us in Street Fighter 2. (But we’re realllllly good… just saying.) Contact our Customer Success Team for more info.</div>
</li>
<li>
<div class="question">Can I change my plan?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">Totes. You can upgrade, downgrade, or cancel your plan any time you want.</div>
</li>
<li class="faq">
<div class="question">What type of product support is available?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">The trial is free, but after that, yeah, you’ll need to subscribe to one of our plans to continue using dapulse. Don’t give us that look ;) We’re committed to building an amazing product that provides real and tangible value to you every day.
At 16 cents per user a day, our Basic plan sets you back less than a pencil per person. There’s no greater investment than pulling your team together and finding a great way to get work done, and many of our customers tell us that their experience
with dapulse is truly invaluable. Imagine never missing another deadline, totally eliminating angry phone calls from clients, or putting an end to painful email threads—for real. Imagine actually enjoying your everyday life at work. Priceless,
no?
</div>
</li>
<li>
<div class="question">Who should be the primary users?
<img class="caret" src="/images/chevron.png" width="25">
</div>
<div class="answer">We accept all major credit cards. Some of our developers could probably be bribed with cookies, but you didn’t hear that from us.</div>
</li>
</ul>
</div>
</div>
</body>
</html>
So I have a navigation bar menu. The website default is on the About page. But what I'm trying to accomplish is that when I click on another menu item, like Experience, I'd like the About paragraph to change into the paragraph I have for Experience. I feel like this is very simple but I can't seem to get it right.
Thanks for your help! This is how my html looks:
<nav id="nav-bar">
<ul>
<li>About Me</li>
<li>Experience</li>
<li>Education</li>
<li>Contact</li>
</ul>
</nav>
<div class="title">
<p><span style="font-size:55px;">—</span> Jennifer</p>
</div>
<div class="jenpic">
<img src="jen_1.svg" alt="" />
<div class="vr"> </div>
</div>
<div id="text">
<div class="bio">
<p>blah blah blah</p>
</div>
<div class="experience" style="display:none">
<p>blah blah blah</p>
</div>
<div class="education" style="display:none">
<p>blah blah blah</p>
</div>
<div class="contact" style="display:none">
<p>blah blah blah</p>
</div>
</div>
This is fairly simple. Here is a working snippet:
$("#about").click(function() {
$(".experience").hide();
$(".education").hide();
$(".contact").hide();
$(".bio").show();
});
$("#exp").click(function() {
$(".bio").hide();
$(".education").hide();
$(".contact").hide();
$(".experience").show();
});
$("#edc").click(function() {
$(".bio").hide();
$(".experience").hide();
$(".contact").hide();
$(".education").show();
});
$("#con").click(function() {
$(".bio").hide();
$(".education").hide();
$(".experience").hide();
$(".contact").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-bar">
<ul>
<li id="about"><a href="#about" >About Me</a></li>
<li id="exp">Experience</li>
<li id="edc"><a href="#education" >Education</a></li>
<li id="con"><a href="#contact" >Contact</a></li>
</ul>
</nav>
<div class="title">
<p><span style="font-size:55px;">—</span> Jennifer</p>
</div>
<div class="jenpic">
<img src="jen_1.svg" alt="" />
<div class="vr"> </div>
</div>
<div id="text">
<div class="bio">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
<div class="experience" style="display:none">
<p>Prompt I & II trained. Experienced in evaluating, diagnosing and treating speech sound disorders (including articulation, dysarthria, apraxia of speech, phonological), fluency disorders (stuttering), language delays/disorders and pragmatic (social) language weaknesses. Experienced in implementing and training AAC (augmentative and alternative communication) for nonverbal/emerging communicators. Skilled in working with ASD (Autism Spectrum Disorders) & a variety of developmental/medical conditions.</p>
</div>
<div class="education" style="display:none">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
<div class="contact" style="display:none">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
</div>
Whenever a menu button is clicked, it hides all the rest and shows the one that is clicked. I hope this helps!
Matt
You can do it with jQuery like this, there's no need of "display:none;":
$( document ).ready(function() {
$(".experience").hide();
$(".education").hide();
$(".contact").hide();
$("#eduNavItem").click(function() {
$(".bio").hide();
$(".education").show();
});
});
#eduNavItem would be the id of the education item at the navigation bar.
I would try to make it so you could add more links and areas quickly.
Add a class to each section so you can hide them all at once.
Then use the href to find the correct section to show. (i have changed your "bio" div to about to match the href.
Javascript
$(document).ready(function() {
$sections = $('.js-section');
$('#nav-bar a').on('click', function() {
var ref = $(this).attr('href').replace('#','');
$sections.hide();
$("." + ref).show();
});
});
Html
<nav id="nav-bar">
<ul>
<li>About Me</li>
<li>Experience</li>
<li>Education</li>
<li>Contact</li>
</ul>
</nav>
<div class="title">
<p><span style="font-size:55px;">—</span> name of person</p>
</div>
<div class="jenpic">
<img src="blah.svg" alt="" />
<div class="vr"> </div>
</div>
<div id="text">
<div class="about js-section">
<p>blah blah about</p>
</div>
<div class="experience js-section" style="display:none">
<p>blah blah experience</p>
</div>
<div class="education js-section" style="display:none">
<p>blah blah education</p>
</div>
<div class="contact js-section" style="display:none">
<p>blah blah contact</p>
</div>
</div>
I would change your code to be similar to below. The advantage with this is that you can continue to develop your site and the code would never need to be changed. It works by using the data-target element to target the element that contains the text. Hope that is helpful ask any questions that you might have, I am happy to help!
$(document).ready(function(){
$('nav#nav-bar a').on('click',function(){
$('.active').removeClass('active');
$( $( this ).attr('data-target') ).addClass('active');
})
})
#text > div {
display:none;
}
.active {
display: block !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav id="nav-bar">
<ul>
<li>About Me</li>
<li>Experience</li>
<li>Education</li>
<li>Contact</li>
</ul>
</nav>
<div class="title">
<p><span style="font-size:55px;">—</span> Jennifer</p>
</div>
<div class="jenpic">
<img src="jen_1.svg" alt="" />
<div class="vr"> </div>
</div>
<div id="text">
<div id='bio' class="active">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
<div id="experience">
<p>Prompt I & II trained. Experienced in evaluating, diagnosing and treating speech sound disorders (including articulation, dysarthria, apraxia of speech, phonological), fluency disorders (stuttering), language delays/disorders and pragmatic (social) language weaknesses. Experienced in implementing and training AAC (augmentative and alternative communication) for nonverbal/emerging communicators. Skilled in working with ASD (Autism Spectrum Disorders) & a variety of developmental/medical conditions.</p>
</div>
<div id="education">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
<div id="contact">
<p>Hi, I’m Jennifer! I am a Speech-Language
Pathologist providing private speech and
language services to the pediatric population.</p>
</div>
</div>
First of all sorry for the vague title, but i didn’t know how to explain my problem in a better way.
Anyway this is what i want. Let’s say we have three tabs: one showing artist list, one showing album list and one showing songs. All this three tabs has selectable lists and i would like to be able, for example, to select and artist, then going to albums (that now should be show all as selected because i checked the artis) and be able to deselect one album and then, for, example, be able to go to songs and manage the songs individually.
Of course then i should be able to retrive the list of all the songs selected by the user.
EDIT 1
added two images to explain better
EDIT 2
Added some code. At the moment i have only HTML and CSS, i'm waiting for your help for the JS code :)
that's the HTML structure
<div id="tabs" class="page-content tabs overflowTab">
<div id="tab1" class="tab active">
<div class="content-block-title" id="indexScrollOffset">Seleziona artisti</div>
<div class="list-block media-list">
<ul>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro1">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 1</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content.modificato">
<div class="item-media modificato">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="#" class="item-link" id="apriTitoliLibro2">
<div class="item-inner modificato">
<div class="item-title-row">
<div class="item-title">Artist 2</div>
</div>
<div class="item-subtitle">Some Text</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
<div id="tab2" class="tab">
<div class="content-block-title">Seleziona Album</div>
<div class="list-block media list">
<div class="list-group">
<ul>
<li class="list-group-title">Artist 1</li>
<li id="titoliLibro1">
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 1</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
<li>
<div class="item-content-modificato titoli">
<div class="item-media modificato fake-media-list">
<i class="icon icon-form-checkbox modificato"></i>
</div>
<a href="personalizzaArticoli.html" class="item-link">
<div class="item-inner modificato titoli">
<div class="item-title-row modificato">
<div class="item-title modificato">Album 2</div>
<div class="item-after modificato"><span class="font-size-artt-label">Some text</div>
</div>
</div>
</a>
</div>
</li>
[...]
</ul>
</div>
</div>
</div>
<div id="tab3" class="tab">
<div class="content-block-title">Seleziona song</div>
<div class="list-block searchbar-not-found">
<ul>
<li class="item-content">
<div class="item-inner">
CONTENT HERE IS ADDED DYNAMICALLY FROM A WEBSQL DB
</div>
</li>
</ul>
</div>
</div>
Edit 3
It's a phonegap application and yes, already using jQuery (as less as possibile for performance) :)
Now my question: which is the best way to handle this? My only idea is to create an array and update it with all the elements selected and, in order to show an element as selected or not, checking it with indexOf to see if it exist… is this a good way? I’m a bit worried about performance.
Thanks