Develop Reference

Tab content not hiding jQuery

So I'm trying to create a set of tabs, however, the content isn't hiding when I move tabs it just gets stacked.
Here is my code
HTML
<section class="product-features">
<section class="container">
<section class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</section>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel">
<section class="image">
<img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
</section>
<section class="content">
<img src="./images/read.svg" alt="Book">
<h1>Innovative Storytelling</h1>
<p>Hello</p>
</section>
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel">
<section class="image">
<img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
</section>
<section class="content">
<img src="./images/emotion.svg" alt="Emotions">
<h1>Immediate Emotional Feedback</h1>
<p>Hello</p>
</section>
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel">
<section class="image">
<img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
</section>
<section class="content">
<img src="./images/idea.svg" alt="Light Bulb">
<h1>Expanding Digital Library</h1>
<p>Hello</p>
</section>
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
</section>
JS
$(document).ready(function() {
$('.tab-content > .tab-panel').hide();
$('.tab-content > .tab-panel:first-of-type').show();
$('.feature-tabs a').click(function(e) {
e.preventDefault();
var $this = $(this),
tabContent = '#'+$this.parents('.tab-content').data('.tab-panel'),
link = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
link.removeClass('active');
$this.addClass('active');
$(tabContent).children('.tab-panel').hide();
$(target).show();
});
});
Active is being placed on the tab and the content is showing, however, I can't seem to make the previous tab content to disappear.
So any help or a solution would be helpful.
Thanks.

I'd create a reference to the current shown panel every time that click function is run, and hide the previous if it exists.
let current = null;
$(document).ready(function() {
$('.tab-content > .tab-panel').hide();
current = $('.tab-content > .tab-panel:first-of-type').show();
$('.feature-tabs a').click(function(e) {
e.preventDefault();
var $this = $(this),
tabContent = '#'+$this.parents('.tab-content').data('.tab-panel'),
link = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
if (current) {
current.hide();
}
current = $(target);
//link.removeClass('active');
$this.addClass('active');
$(tabContent).children('.tab-panel').hide();
$(target).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="product-features">
<section class="container">
<section class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</section>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel">
<section class="image">
<img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
</section>
<section class="content">
<img src="./images/read.svg" alt="Book">
<h1>Innovative Storytelling</h1>
<p>Hello</p>
</section>
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel">
<section class="image">
<img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
</section>
<section class="content">
<img src="./images/emotion.svg" alt="Emotions">
<h1>Immediate Emotional Feedback</h1>
<p>Hello</p>
</section>
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel">
<section class="image">
<img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
</section>
<section class="content">
<img src="./images/idea.svg" alt="Light Bulb">
<h1>Expanding Digital Library</h1>
<p>Hello</p>
</section>
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
</section>

Your problem is in the .show() when you first start the page, this adds some inline code to the element display: block;, which overrides your styling for the panels (i.e. hiding those without .active) because inline styles are prioritised over class stylings.
You can simplify your code a little if you would like, I've provided some code below that has the same functionality you are aiming for. This works for any number of tabs on a page, but does not let you have a tab group within another (i.e. as a child). It does require you to add the class .feature-tabs-wrapper in a parent div that wraps both the menu links and the panels (see the third line of the demo HTML below).
Let me know if you needed something else.
Demo
// Activate the first panel for any tab setup on the page
$(".feature-tabs-wrapper").each(function() {
$(this).find(".tab-panel").first().addClass("active");
})
// Add click event to the tab links
$(".feature-tabs > li > a").click(function() {
// Remove active panel from any of the associated tabs
$(this).closest(".feature-tabs-wrapper").find(".tab-panel.active").removeClass("active");
// Get id of tab panel to be activated
var tabID = $(this).attr("href");
// Activate that tab panel
$(tabID).addClass("active");
});
.tab-panel {
display: none;
}
.tab-panel.active {
display: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="product-features">
<section class="container feature-tabs-wrapper">
<section class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</section>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel">
<section class="image">
<img src="./images/Innovative-Storytelling.png" alt="Innovative Storytelling photo">
</section>
<section class="content">
<img src="./images/read.svg" alt="Book">
<h1>Innovative Storytelling</h1>
<p>Hello</p>
</section>
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel">
<section class="image">
<img src="./images/Immediate-Emotional-Feedback.png" alt="Immediate Emotional Feedback photo">
</section>
<section class="content">
<img src="./images/emotion.svg" alt="Emotions">
<h1>Immediate Emotional Feedback</h1>
<p>Hello</p>
</section>
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel">
<section class="image">
<img src="./images/Expanding-Digital-Library.png" alt="Expanding Digital Library photo">
</section>
<section class="content">
<img src="./images/idea.svg" alt="Light Bulb">
<h1>Expanding Digital Library</h1>
<p>Hello</p>
</section>
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
</section>

this code work for me
u can try it
code html
<section class="product-features">
<section class="container">
<ul class="feature-tabs" data-tabgroup="productFeatureTabs">
<li>Innovative Storytelling</li>
<li>Immediate Emotional Feedback</li>
<li>Expanding Digital Library</li>
</ul>
<section class="tab-content" id="productFeatureTabs">
<!-- start Innovative Storytelling -->
<section id="InnovativeStorytelling" class="tab-panel active">
a
</section>
<!-- end Innovative Storytelling -->
<!-- start Immediate Emotional Feedback -->
<section id="ImmediateEmotionalFeedback" class="tab-panel hidden">
b
</section>
<!-- end Immediate Emotional Feedback-->
<!-- start Expanding Digital Library -->
<section id="ExpandingDigitalLibrary" class="tab-panel hidden">
c
</section>
<!-- end Expanding Digital Library-->
</section>
</section>
code jquery
(function () {
var $tabNavigation = $(".feature-tabs a");
if ($tabNavigation.length > 0) {
$tabNavigation.on("click", function (e) {
$('body').find('.feature-tabs li').each(function (index, value) {
$(value).removeClass('active');
})
$(this).tab("show");
$('body').find('.tab-panel').each(function (index, value) {
if (!$(value).hasClass('active')) {
$(this).addClass('hidden');
} else {
$(this).removeClass('hidden');
}
})
e.preventDefault();
return false;
});
}
})();

the final page 20% trance Y one page Pure JS One Page Scroll Plugin

i'm using https://github.com/peachananr/purejs-onepage-scroll
i want final page 20% transform
example http://www.jqueryscript.net/demo/Smooth-One-Page-Scroll-Plugin-For-jQuery-SONP/
<body>
<div class="wrapper">
<div class="main">
<section class="page1">
<div class="page_container">
</div>
</section>
<section class="page2">
<div class="page_container">
</div>
</section>
<section class="page3"><!-- i want 20% transform -->
<div class="page_container">
</div>
</div>
</section>

Foundation off canvas won't work?

Alright, I followed all the instructions on the page, or so I thought, but I still can't get the Off Canvas to work in my Foundation?
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<script>
$(document).foundation();
</script>
That's how I'm instructed to put it in, as per the website. http://foundation.zurb.com/docs/components/offcanvas.html
Or so I thought? Also
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<section class="main-section">
<!-- content goes here -->
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
That's all done as per instructed?
What I end up with is the menu showing, but when I click on the button for the off canvas to pop, it doesn't pop?
EDIT
Alright, so I tried what you suggested, and it did pop. BUUUT rather than pop out from the side, it popped, shoving everything DOWN, and made this tiny scroll bar?
Alright, this was what it looked like, upon entering your code. THen...
When I clicked it, this happened...
See all that white space? The heading Welcome to Foundation is one mouse scroll down. See the little bitty scroll bar next to the popped menu? =/

Ok i got it.
Move $(document).foundation(); to onload in the body tag. Or at least put it last inside body tags. You can leave the .js references inside head tags. I did this way:
<html>
<head>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<link rel="stylesheet" href="css/foundation.css">
</head>
<body onload="$(document).foundation();">
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<section class="main-section">
<!-- content goes here -->
</section>
<a class="exit-off-canvas"></a>
</div>
</div>
</body>
I hope it works!
PD: It's really frustrating that i had 2 comments trying to correct my mistake, and zero answers trying to solve the question.

I would suggest copy and pasting all the following code into a brand new html page and checking it. Then you can either just build off it or figure out what the problem is on your old code.
Make sure that all the linked files (css and js) are getting loaded. You might need to change the paths on the example. It is absolutely essential to make sure they are getting accessed. Use your web browser inspector to see if your getting any 404 (not found) errors.
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation</title>
<link rel="stylesheet" href="css/app.css" />
<script src="bower_components/modernizr/modernizr.js"></script>
</head>
<body>
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<nav class="tab-bar">
<section class="left-small">
<a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
<section class="middle tab-bar-section">
<h1 class="title">Foundation</h1>
</section>
<section class="right-small">
<a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
</section>
</nav>
<aside class="left-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Foundation</label></li>
<li>The Psychohistorians</li>
<li>...</li>
</ul>
</aside>
<aside class="right-off-canvas-menu">
<ul class="off-canvas-list">
<li><label>Users</label></li>
<li>Hari Seldon</li>
<li>...</li>
</ul>
</aside>
<a class="exit-off-canvas"></a>
<div class="row">
<div class="large-12 columns">
<h1>Welcome to Foundation</h1>
</div>
</div>
<div class="row">
<div class="large-12 columns">
<div class="panel">
<h3>We’re stoked you want to try Foundation! </h3>
<p>To get going, this file (index.html) includes some basic styles you can modify, play around with, or totally destroy to get going.</p>
<p>Once you've exhausted the fun in this document, you should check out:</p>
<div class="row">
<div class="large-4 medium-4 columns">
<p>Foundation Documentation<br />Everything you need to know about using the framework.</p>
</div>
<div class="large-4 medium-4 columns">
<p>Foundation on Github<br />Latest code, issue reports, feature requests and more.</p>
</div>
<div class="large-4 medium-4 columns">
<p>#foundationzurb<br />Ping us on Twitter if you have questions. If you build something with this we'd love to see it (and send you a totally boss sticker).</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/foundation/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>

just add this CSS code:
.inner-wrap {
min-height: 100vh;
}

Waypoints.js horizontal and vertical in one page

I'm writing a parallax website with waypoints.js and skrollr.js
and ran into a problem:
slide1 should scroll normal (vertical) and slide-2 should scroll horizontal once it's triggered (width: 4000px). But I have no idea how to do that. I know the new waypoints.js has horizontal:true but I'm kinda stuck right now. Has anyone an idea?
<section id="slide-1">
<div data-anchor-target="#slide-1">
<div class="Container">
<div class="Content">
<h2>Scroll this vertically</h2>
</div>
</div>
</div>
</section>
<section id="slide-2">
<div data-anchor-target="#slide-2">
<div class="Container">
<div class="Content">
<h2>Scroll this horizontal</h2>
</div>
</div>
</div>
</section>
<section id="slide-3">
<div data-anchor-target="#slide-3">
<div class="Container">
<div class="Content">
<h2>Scroll this vertically again</h2>
</div>
</div>
</div>
</section>
Maybe something like:
$('#slide-2').waypoint(function() {
//toogle #slide-2 width:4000px scroll horizontal:true etc.
;});

How to add jquery photo gallery or slider in .asp page

Here's my gallery tab that i want to have a jquery photo gallery or slide. I already downloaded a jquery photo gallery script but my big trouble is i don't know where to put the code on the page. Please help me.
Here's my gallery.asp code: (Please tell me where to put the photo gallery jquery code)
<% intSectionId = 103 %>
<!--#include file ="include/inc_header.asp"-->
<!--#include file ="include/functions_default.asp"-->
<body>
<div id="art-page-background-gradient"></div>
<div id="art-main">
<div class="art-Sheet">
<div class="art-Sheet-tl"></div>
<div class="art-Sheet-tr"></div>
<div class="art-Sheet-bl"></div>
<div class="art-Sheet-br"></div>
<div class="art-Sheet-tc"></div>
<div class="art-Sheet-bc"></div>
<div class="art-Sheet-cl"></div>
<div class="art-Sheet-cr"></div>
<div class="art-Sheet-cc"></div>
<div class="art-Sheet-body">
<!-- start header2 section -->
<!--#include file ="include/inc_header2.asp"-->
<!-- end header2 section -->
<!-- start navigation section -->
<!--#include file ="include/inc_navigation.asp"-->
<!-- end navigation section -->
<!-- start main content section -->
<div class="art-contentLayout">
<div class="art-content">
<div class="art-Post">
<div class="art-Post-body">
<!-- start inner content section -->
<div class="art-Post-inner">
<h2 class="art-PostHeader">
Gallery</h2>
<div class="art-PostContent">
<div style="float:right;margin:0px 5px 5px 5px"></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<div style="padding:0px 60px 0px 60px;">
<p> </p>
</div>
<div style="padding:0px 60px 0px 60px;">
<p align="right"> </p>
</div>
</div>
<div class="cleared"></div>
<!-- end inner content section -->
</div>
<div class="cleared"></div>
</div>
</div>
</div>
<!-- end main content section -->
<!-- start sidebar section -->
<!--#include file ="include/inc_sidebar.asp"-->
<!-- end sidebar section -->
<!-- start footer section -->
<!--#include file ="include/inc_footer.asp"-->
<!-- end footer section -->
</div>
<div class="cleared"></div>
</div>
</div>
<div class="cleared"></div>
<p class="art-page-footer"></p>
</div>
</body>

Have you used jcarousal sorgalla.com/jcarousel see the examples you will get your answer

it depends on your css, and on the particular jquery widget, but i think you should try right after:
<div class="art-PostContent">