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>
Related
So I have 22 different lists with 50-100 items inside. And they take ~25k lines of html code. How to make them take less lines?
For example:
I want this to have only one item in list that repeats many times but with different ids, ids in classicImage/shortyImage(' ') and different images if this is possible
<a onclick="showClassic()">
<div class="classic">
<img src="images/classic/classic_default.png" class="imgcol2" id="classicimg" style="max-height: 75px; max-width: 150px;" >
<div class="wname" style="width: 150px;">CLASSIC</div>
</div>
</a>
<a onclick="showShorty()">
<div class="shorty">
<img src="images/shorty/shorty_default.png" class="imgcol2" id="shortyimg">
<div class="wname" style="width: 150px;">SHORTY</div>
</div>
</a>
<div class="results">
<ul id="classicList">
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-avalanche -->
<a onclick="classicImage('classic-avalanche'); setClassicPrice(1275)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_avalanche.png" class="windowimage" id="classic-avalanche">
</div>
<p class="skinname">Classic Avalanche</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="classicimg" to source of image with id classic-default -->
<a onclick="classicImage('classic-default'); setClassicPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/classic/classic_default.png" class="windowimage" id="classic-default">
</div>
<p class="skinname">Classic Default</p>
</div>
</a>
</li>
</ul>
</div>
<div class="results">
<ul id="shortyList">
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-aerosol -->
<a onclick="shortyImage('shorty-aerosol'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_aerosol.png" class="windowimage" id="shorty-aerosol">
</div>
<p class="skinname">Shorty Aerosol</p>
</div>
</a>
</li>
<li class="collection-item">
<!-- sets source of image with id="shortyimg" to source of image with id shorty-default -->
<a onclick="shortyImage('shorty-default'); setShortyPrice(0)">
<div class="result-container">
<div class="result">
<img src="images/shorty/shorty_default.png" class="windowimage" id="shorty-default">
</div>
<p class="skinname">Shorty Default</p>
</div>
</a>
</li>
</ul>
</div>
Considering you tagged javascript and html only, i assume you have no backend code to handle the templating.
So my best advice would be to divide those multiple lists into multiple .html file and load them with JS, like this example with jQuery :
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#firstList").load("firstList.html");
});
</script>
</head>
<body>
<div id="firstList"></div>
</body>
</html>
I am working on a website that uses the widgets to show reviews and such from the TripAdvisor website. However, according to Google's Page Speed Analytics, they are harming the performance of my website. Specifically, neither the CSS nor JavaScript are minified and the images are not optimized. Build tools such as CSSNano cannot be used in this situation (to my knowledge) since they come from a third-party. Typically, from my experience, when a third-party script is loaded from a CDN or similar, a minified version is available, but I do not believe this is the case in this instance. I looked at Google's Page Speed Module for the server, but I have IIS, and I am not positive it would work anyway (since the scripts are pulled from TripAdvisor rather than hosted on my server).
For reference, the widget renders as follows:
<!-- TripAdvisor sidebar -->
<div class="col-md-3 hidden-sm hidden-xs"><div id="TA_selfserveprop522" class="TA_selfserveprop"><div id="CDSWIDSSP" class="widSSP widSSPnarrow" style="width: 240px;"> <div class="widSSPData"> <div class="widSSPBranding"> <dl> <dt> <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"></a> </dt> <dt class="widSSPTagline">Know better. Book better. Go better.</dt> </dl> </div><!--/ cdsBranding--> <div class="widSSPComponent"> <div class="widSSPSummary"> <dl> <a target="_blank" href="https://www.tripadvisor.com/Hotel_Review-g2271346-d1845701-Reviews-Hampton_Inn_Suites_St_Louis_South_I_55-Mehlville_Saint_Louis_Missouri.html" onclick="ta.cds.handleTALink(11900,this);return true;" rel="nofollow"> <dt class="widSSPH18">Hampton Inn & Suites St. Louis/South I-55</dt> </a> </dl> </div><!--/ cdsSummary--> </div><!--/ cdsComponent--> <div class="widSSPComponent widSSPOptional"> <div class="widSSPTrvlRtng"> <dl> <dt class="widSSPH11">TripAdvisor Traveler Rating</dt> <dd> <div class="widSSPOverall"> <span class="ui_bubble_rating bubble_50"></span> <div>Based on <b>1,291</b> traveler reviews</div> </div><!--/ overall --> </dd> </dl> </div> </div><!--/ cdsComponent --> <div class="widSSPWrap widSSPOptional"> <div class="widSSPInformation"> <div class="widSSPWrap"> <div class="widSSPPopIdx widSSPSingle"> <b>TripAdvisor Ranking</b> <span class="widSSPPopIdxData"> <span class="widSSPPopIdxData widSSPPopIdxNumbers"> <sup>#</sup>1 of 2 </span> hotels in Mehlville </span> </div><!--/ popIdx--> </div><!--/ cdsWrap--> </div><!--/ cdsInformation--> </div><!--/ cdsWrap--> <div class="widSSPComponent widSSPOptional"> <dl class="widSSPReviews"> <dt class="widSSPH11">Most Recent Traveler Reviews</dt> <dd class="widSSPOneReview"> <ul class="widSSPBullet"> <li> <span class="widSSPDate">Jun 28, 2017:</span> <span class="widSSPQuote">“Hampton Inn & Suites was GREAT!!!!”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“We Are Family!”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“A Great Experience in a Time of...”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“St Louis attractions trip”</span> </li> <li> <span class="widSSPDate">Jun 27, 2017:</span> <span class="widSSPQuote">“Too Pricey, Not So Nicey”</span> </li> </ul><!--/ bullet--> </dd><!--/ hReview--> </dl> </div> <div class="widSSPAll"> <ul class="widSSPReadReview"> <li>Read reviews</li> </ul> <ul class="widSSPWriteReview"> <li>Write a review</li> </ul> </div><!--/ cdsAll--> <div class="widSSPLegal">© 2017 TripAdvisor LLC</div><!--/ cdsLegal--> </div><!--/ cdsData--> </div><!--/ CDSPOP.cdsBx--> <img id="ta_tracking_selfserveprop_google" style="height:1px;width:1px;border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1020463497/?value=0&guid=ON&script=0&data=POS%3Den_US%3Bmobile%3DN%3Bhrental_id%3D1845701%3BPropId%3D1845701%3Btravel_destid%3D2271346%3Bservlet%3DWidget%3Bwidget_name%3Dselfserveprop"><img id="ta_tracking_selfserveprop_criteo" style="height:1px;width:1px;border-style:none;" src="//widget.criteo.com/event?a=an%3Dweb-widget-tripadvisor.com%26cn%3Dus%26ln%3Den&v=4.1.0&p0=e%3Dce%26widget_type%3Dselfserveprop&p1=e%3Dexd%26site_type%3Dd&p2=e%3Dvp%26p%3D1845701&p3=e%3Ddis%26a%3D%255Ban%25253Dweb-widget-tripadvisor.com%252526cn%25253Dus%252526ln%25253Den%255D&rt=gif"></div><script src="https://www.jscache.com/wejs?wtype=selfserveprop&uniq=522&locationId=1845701&lang=en_US&rating=true&nreviews=5&writereviewlink=true&popIdx=true&iswide=false&border=false&display_version=2"></script><script src="https://www.tripadvisor.com/WidgetEmbed-selfserveprop?border=false&popIdx=true&iswide=false&locationId=1845701&display_version=2&uniq=522&rating=true&lang=en_US&nreviews=5&writereviewlink=true"></script></div>
<div class="col-sm-12 visible-sm visible-xs hidden-lg hidden-md"><div id="TA_cdsratingsonlywide284" class="TA_cdsratingsonlywide"><div id="CDSRATINGWIDGET284" class="cdsROW white shadow border wide " style="width: 1px;"> <div id="CDSROWCONTAINER284" class="cdsROWContainer" style="width: auto;"> <!--[if lte IE 7]> <table border="0" cellspacing="0"> <tr> <td> <div id="CDSROWLOGO284" class="cdsComponent logo"> <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"/></a> </div> </td> <td> <div id="CDSROWLOC284" class="cdsComponent cdsLocName"> <a id="CDSLOCINNER" target="_blank" href="https://www.tripadvisor.com/Hotel_Review-g2271346-d1845701-Reviews-Hampton_Inn_Suites_St_Louis_South_I_55-Mehlville_Saint_Louis_Missouri.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;">Hampton Inn & Suites St. Louis/South I-55</a> </div> </td> <td> <div id="CDSROWRATING284" class="cdsComponent cdsRating"> <span class="ui_bubble_rating bubble_50"></span> <span> 1,291 Reviews </span> </div> </td> </tr> </table> <![endif]--> <!--[if gte IE 8]><!--> <div id="CDSROWLOGO284" class="cdsComponent logo"> <a target="_blank" href="https://www.tripadvisor.com/"><img src="https://www.tripadvisor.com/img/cdsi/img2/branding/tripadvisor_logo_transp_340x80-18034-2.png" alt="TripAdvisor"></a> </div> <div id="CDSROWLOC284" class="cdsComponent cdsLocName" style="max-width: 1px;"> <a id="CDSLOCINNER" target="_blank" href="https://www.tripadvisor.com/Hotel_Review-g2271346-d1845701-Reviews-Hampton_Inn_Suites_St_Louis_South_I_55-Mehlville_Saint_Louis_Missouri.html" onclick="ta.cds.handleTALink($cdsConfig.getMcid()); return true;" rel="nofollow">Hampton Inn & Suites St. Louis/South I-55</a> </div> <div id="CDSROWRATING284" class="cdsComponent cdsRating"> <span class="ui_bubble_rating bubble_50"></span> <span> 1,291 Reviews </span> </div> <!--<![endif]--> </div> </div> <img id="ta_tracking_cdsratingsonlywide_google" style="height:1px;width:1px;border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/1020463497/?value=0&guid=ON&script=0&data=POS%3Den_US%3Bmobile%3DN%3Bhrental_id%3D1845701%3BPropId%3D1845701%3Btravel_destid%3D2271346%3Bservlet%3DWidget%3Bwidget_name%3Dcdsratingsonlywide"><img id="ta_tracking_cdsratingsonlywide_criteo" style="height:1px;width:1px;border-style:none;" src="//widget.criteo.com/event?a=an%3Dweb-widget-tripadvisor.com%26cn%3Dus%26ln%3Den&v=4.1.0&p0=e%3Dce%26widget_type%3Dcdsratingsonlywide&p1=e%3Dexd%26site_type%3Dd&p2=e%3Dvp%26p%3D1845701&p3=e%3Ddis%26a%3D%255Ban%25253Dweb-widget-tripadvisor.com%252526cn%25253Dus%252526ln%25253Den%255D&rt=gif"></div><script src="https://www.jscache.com/wejs?wtype=cdsratingsonlywide&uniq=284&locationId=1845701&lang=en_US&border=true&shadow=true&display_version=2"></script><script src="https://www.tripadvisor.com/WidgetEmbed-cdsratingsonlywide?border=true&shadow=true&locationId=1845701&display_version=2&uniq=284&lang=en_US"></script></div>
</div>
I am starting to think it is simply not possible to optimize the widgets. However, they do seem to take a notable toll on the website, so I would like to see if anyone has relevant experience with these widgets or something similar.
Thanks.
I'm dealing with this issue right now. Removing the widget from the site results in a 60% improvement in site speed. You can't alter their widget code in any meaningful way to improve it, so it's better to periodically screenshot its current rendered view and crop it into a small .png that you place on your site. It's not at all clear whether it provides all that much credibility value to people anyways.
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>
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();
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