Develop Reference

Writing this in Javascript instead of jQuery

Hi I'm accustomed to writing code in jQuery, and wanting to learn to write in plain Javascript instead. I've got this example to show and hide some tabs using jQuery which is working correctly, but how would this be written differently in Javascript?
I'm trying to compare how differently they're written so i can get a better understanding of it. Any help/tips on how this would be done would be greatly appreciated.
setTimeout(function() {
$('.tabContainer a').click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var activeTab = $(this).attr("href");
$('.tabContent').not(activeTab).css("display","none");
$(activeTab).fadeIn();
});
},1000);
.tabContent {display: none;}
#tab1 {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
<ul class="tabContainer">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" class="tabContent">Tab 1</div>
<div id="tab2" class="tabContent">Tab 2</div>
<div id="tab3" class="tabContent">Tab 3</div>
</div>

You can try the following way except the fadeIn:
setTimeout(function() {
//get all a elements and loop through them
document.querySelectorAll('.tabContainer a').forEach(function(el){
//attach click event to the current element
el.addEventListener('click', function(event) {
event.preventDefault();
//remove the class current from all
this.closest('.tabContainer')
.querySelector('.current')
.classList.remove("current");
//add the class current to the current element's closest li
this.closest('li').classList.add("current");
//set display style none to all
document.querySelectorAll('.tabContent').forEach(function(a){
a.style.display = "none";
});
var activeTab = this.getAttribute("href");
//set display style block to the mached element
document.querySelector(activeTab).style.display = "block";
});
});
}, 1000);
.tabContent {display: none;}
#tab1 {display: block;}
<div class="tabWrapper">
<ul class="tabContainer">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" class="tabContent">Tab 1</div>
<div id="tab2" class="tabContent">Tab 2</div>
<div id="tab3" class="tabContent">Tab 3</div>
</div>

Multiple Accordion on Page?

im using this Accordion ... https://jsfiddle.net/y7czusd7/1/
$(".tab_content").hide();
$(".tab_content:first").show();
/* if in tab mode */
$("ul.tabs li").click(function() {
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_drawer_heading").removeClass("d_active");
$(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");
});
$(".tab_container").css("min-height", function(){
return $(".tabs").outerHeight() + 50;
});
$(".tab_drawer_heading").click(function() {
$(".tab_content").hide();
var d_activeTab = $(this).attr("rel");
$("#"+d_activeTab).fadeIn();
$(".tab_drawer_heading").removeClass("d_active");
$(this).addClass("d_active");
$("ul.tabs li").removeClass("active");
$("ul.tabs li[rel^='"+d_activeTab+"']").addClass("active");
});
as you see i try to use 2 on the same page, but only the first one is working fine, how can i fix that both work?
Thanks!

You need unique DOM id on same page that why it's not working.

You're using the same Id on both tabs, try changing the seconds one.

I have updated your fiddle: https://jsfiddle.net/y7czusd7/6/
The changes:
1) You need to give different ID's to objects in your HTML. Duplicate ID's are not valid HTML and as a result JQUERY is finding all the objects with the same id and performing an action upon them. In your case it was hiding the div with the content in both list objects.
To demonstrate how to resolve this I've just used two tabs for brevity, note the rel attribute of the li and h3 elements match the id attribute of a div element. Also the div elements with the class tab_container now have id's set.
<div class="tabs_wrapper">
<ul class="tabs">
<li class="active" rel="tab1">Tab 1</li>
<li rel="tab2">Tab 2</li>
</ul>
<div id="con1" class="tab_container">
<h3 class="d_active tab_drawer_heading" rel="tab1">Tab 1</h3>
<div id="tab1" class="tab_content">
<h2>Tab 1 content</h2>
<p>Tab 1</p>
</div>
<!-- #tab1 -->
<h3 class="tab_drawer_heading" rel="tab2">Tab 2</h3>
<div id="tab2" class="tab_content">
<h2>Tab 2 content</h2>
<p>Tab 2</p>
</div>
<!-- #tab2 -->
</div>
</div>
<div class="tabs_wrapper">
<ul class="tabs">
<li class="active" rel="tab21">Tab 1</li>
<li rel="tab22">Tab 2</li>
</ul>
<div id="con2" class="tab_container">
<h3 class="d_active tab_drawer_heading" rel="tab21">Tab 21</h3>
<div id="tab21" class="tab_content">
<h2>Tab 21 content</h2>
<p>Tab 21</p>
</div>
<!-- #tab21 -->
<h3 class="tab_drawer_heading" rel="tab22">Tab 22</h3>
<div id="tab22" class="tab_content">
<h2>Tab 22 content</h2>
<p>Tab 22</p>
</div>
<!-- #tab22 -->
</div>
</div>
2) Your JavaScript also needs tweaking, the click function of the class ul.tabs li needs to target the tab_container class of the correct div element. I've done this by determining the parent of the active tab (which you had already identified) and then using this object to hide all child divs. This is as per below, note the parent container variable and it's use:
$("ul.tabs li").click(function() {
var activeTab = $(this).attr("rel");
var parentContainer = $("#"+activeTab).parent("div.tab_container").attr("id");
$("#"+ parentContainer).children("div").hide();
$("#"+activeTab).fadeIn();
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_drawer_heading").removeClass("d_active");
$(".tab_drawer_heading[rel^='"+activeTab+"']").addClass("d_active");
});
The same can be applied to your other click function for completeness.
Hope this helps.

JavaScript show last tab

I've created 4 tabs and only 1 is shown at a time, but if I post something in a form in tab 4 then tab 1 becomes active but I want it to automatically show the tab that the stuff was posted in.
Here is my code:
<script src="../js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
//Default Action
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
</script>
<center>
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab_container"><br><br><br>
<div id="tab1" class="tab_content">
<center><h2>Tab 1</h2></center>
</div>
<div id="tab2" class="tab_content">
<center><h2>Tab 2</h2></center>
</div>
<div id="tab3" class="tab_content">
<center><h2>Tab 3</h2></center>
</div>
<div id="tab4" class="tab_content">
<?php
$getmessage = $_POST["message"];
if($getmessage != null) {
echo"Thanks for posting the text!";
} ?>
<center><form method="post" name="form4"><input type="text" id="form4" name="message" placeholder="Type a text here"><br><input type="submit" value="Post text"></form></center>
</div>
</div></center>
</center>
So when I submit the form in tab 4 I get to tab 1 and I manually have to go to tab 4 to see the message that my echo shows. I need it to automatic go to the tab where the form was submitted, but I don't know how to do this.

Add another input (hidden) element to your form, such as active_tab and populate it with the active tab as and when you click on the tabs. Grab that value from $_POST and set the default tab accordingly.
Step 1: add input element
<input type="hidden" name="active_tab" />
Step 2: update input's value
$("ul.tabs li").click(function() {
$('input[name="active_tab"]').val( $(this).index() );
//your remaining code as is
//...
Step 3: set default tab based on post value
$(document).ready(function() {
//Default Action
var tabNum = "<? echo !empty($_POST['active_tab']) ? $_POST['active_tab'] : 0; ?>";
$(".tab_content").hide(); //Hide all content
$("ul.tabs li").eq(tabNum).addClass("active").show(); //Activate the tab
$(".tab_content").eq(tabNum).show(); //Show the tab content

Give your form action="#tab4" (make sure page reloads). And also in your JS script you have to add code that is about to read it from url:
var hash = (window.location.hash).substr(1) || null;
if(hash == "tab4")
$(".tab_content:last").show();

Jquery Tabs Highlight When Clicking 'Next' Button

I'm trying to get the current tab buttons to highlight when you click the 'Next' button, so far they only highlight when clicking on the tabs
Here is the code
$(document).ready(function() {
//First we make sure to only show the first section
$('header').children('section').hide();
$('header').children('section').first().show();
//When we click a link do this..
$('nav ul li a').click(function(){
//Makes sure the active tab gets a different color
$('nav ul li a').removeClass('active');
$(this).addClass('active');
//we pull out the href E.g #tab2
var href = $(this).attr('href');
//We slide up all sections and only reveal the one we clicked E.g #tab2
$('header').children('section').slideUp(200);
$(href).delay(200).slideDown(200);
});
// TRYING TO GET THE CURRENT TAB TO HIGHLIGHT WHEN I CLICK 'Next'
$('section a').click(function(){
$('nav ul li a').removeClass('active');
$('nav ul li a').addClass('active');
var href = $(this).attr('href');
$('header').children('section').slideUp(200);
$(href).delay(200).slideDown(200);
});
});
.active{
background-color: lightgrey;
}
<nav>
<ul>
<li><a class="active" href="#tab1">Tab 1</a></li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
</ul>
</nav>
<header>
<section id="tab1">
This is the content to be displayed in TAB ONE!<br>
This is another line just for testing its flexibility!
Next
</section>
<section id="tab2">
This is the content to be displayed in TAB TWO!
Next
</section>
<section id="tab3">
This is the content to be displayed in TAB THREE!
Next
</section>
<section id="tab4">
This is the content to be displayed in TAB FOUR!<br>
This is another line just for testing its flexibility!
Next
</section>
<section id="tab5">
This is the content to be displayed in TAB FIVE!
Next
</section>
<section id="tab6">
This is the content to be displayed in TAB SIX!
</section>
</header>
I'm trying to get the current tab buttons to highlight when you click the 'Next' button, so far they only highlight when clicking on the tabs

Here are some hints:
Use preventDefault on click handler
Use the .active class to add/remove active class
For your next button, you were adding the .active class to ALL of your links, the trick was to select the right one.
Finally, here is the fiddle
And here is the code for your next link
$('section a').click(function(e){
e.preventDefault();
$('.active').removeClass('active').parent().next().children().first().addClass('active');
var href = $(this).attr('href');
$('header').children('section').slideUp(200);
$(href).delay(200).slideDown(200);
});

JQuery Slide Onclick

I am using the code in example http://www.faridesign.net/2012/05/create-a-awesome-vertical-tabbed-content-area-using-css3-jquery/ I am trying to slide the div tags on a button click on the list so the current tab-content will slide in and the tab just clicked will slide out. I currently have the working example where I can switch between divs fine, but I need to slide in and out between divs. Is there any script I can do this with the current code. using .slide or .effect instead of .show() looks to display two divs at the same time. I'm not sure what I am doing wrong.
<div id="v-nav">
<ul>
<li tab="tab1" class="first current">Main Screen</li>
<li tab="tab2">Div 1</li>
<li tab="tab3">Div 2</li>
<li tab="tab4">Div 3</li>
<li tab="tab5">Div 4</li>
<li tab="tab6">Div 5</li>
<li tab="tab7">Div 6</li>
<li tab="tab8" class="last">Div 7</li>
</ul>
<div class="tab-content">
<h4>Main Screen</h4>
</div>
<div class="tab-content">
<h4>Div 1</h4>
</div>
<div class="tab-content">
<h4>Div 2</h4>
</div>
<div class="tab-content">
<h4>Div 3</h4>
</div>
<div class="tab-content">
<h4>Div 4</h4>
</div>
<div class="tab-content">
<h4>Div 5</h4>
</div>
<div class="tab-content">
<h4>Div 6</h4>
</div>
<div class="tab-content">
<h4>Div 7</h4>
</div>
My Script looks like
$(function () {
var items = $('#v-nav>ul>li').each(function () {
$(this).click(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
//hide all content divs and show current one
//$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show();
//$('#v-nav>div.tab-content').hide().eq(items.index($(this))).fadeIn(100);
$('#v-nav>div.tab-content').hide().eq(items.index($(this))).slideToggle();
window.location.hash = $(this).attr('tab');
});
});
if (location.hash) {
showTab(location.hash);
}
else {
showTab("tab1");
}
function showTab(tab) {
$("#v-nav ul li:[tab*=" + tab + "]").click();
}
// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function () {
showTab(location.hash.replace("#", ""));
})
// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});

Try Vertical jQuery UI Tabs. You might have to restyle a little bit, but I think the effect is what you want. You should be able to add the slide effect from http://api.jqueryui.com/slide-effect/ to the change tab event.