We Keep Coding

jQuery toggle class not working correctly

I created a simple tab filter, but I can't get it to work correctly. When the page first reloads i want the tab content to be hidden and I want the "more" to show on all the tabs, so far that's working. When you click on "more" the tab content should display, and "more" for that current tab should be hidden. I also need the tabs to toggle so i you click the tab again it should hide the tab content and show "more". Right now that issues that i'm having are that when you click on a tab the tab content of the other tabs show, but not the content of that tab, and also "more" doesn't show unless you click on another tab. Thanks!!
$(document).ready(function () {
$('.tab').click(function () {
var tabID = $(this).data('tabid');
$('.iconsContainer').children().removeClass('current');
$(this).addClass('current');
$('.tripctychContent-container').children().toggleClass('hideText');
$('.iconContainerMore').removeClass('hideText');
$('.iconContainerMore', this).toggleClass('hideText');
$('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('hideText');
});
});
.hideText{
display: none;
}
.tab{
cursor: pointer;
}
.iconsContainer{
display: flex;
justify-content: space-between;
}
.tab p:first-of-type:hover{
background: black;
}
.tab p:first-of-type{
padding: 15px 30px;
background: blue;
color: white;
}
.current p:first-of-type{
background: black !important;
}
.tripctychContent-container p{
background: red;
color: white;
}
p{
text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iconsContainer">
<a class="tab" data-tabid="topic1">
<div>
<p>Topic 1 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic2">
<div>
<p>Topic 2 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic3">
<div>
<p>Topic 3 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
</div>
<div class="tripctychContent-container">
<div class="field--name-field-topic-1-content hideText" data-blockid="topic1">
<p>Topic 1 body</p>
</div>
<div class="field--name-field-topic-2-content hideText" data-blockid="topic2">
<p>Topic 2 body</p>
</div>
<div class="field--name-field-topic-3-content hideText" data-blockid="topic3">
<p>Topic 3 body</p>
</div>
</div>

HERE!
just update the JS:
$(document).ready(function () {
$('.tab').click(function () {
var tabID = $(this).data('tabid');
//alert(tabID);
$('.iconsContainer').children().removeClass('current');
$(this).addClass('current');
//$('.tripctychContent-container').toggleClass('hideText');
$('.iconContainerMore').removeClass('hideText');
$('.iconContainerMore', this).toggleClass('hideText');
$( ".tripctychContent-container>div").hide();
$( ".tripctychContent-container>div[data-blockid=" + tabID + " ]" ).show();
$('.tripctychContent-container').find("[data-blockid=" + tabID + "]").toggleClass('hideText');
});
});

You don't need to removeClass explicitly if you are already using toggleClass for the same.

A little change in your JS function in the end.
$(document).ready(function () {
$('.tab').click(function () {
var tabID = $(this).data('tabid');
alert(tabID);
$('.iconsContainer').children().removeClass('current');
$(this).addClass('current');
$('.tripctychContent-container').children().toggleClass('hideText');
$('.iconContainerMore').removeClass('hideText');
$('.iconContainerMore', this).toggleClass('hideText');
$('.field-class').hide()
$("[data-blockid=" + tabID + "]").show();
});
});
And have assigned a common class to all the tab content
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="iconsContainer">
<a class="tab" data-tabid="topic1">
<div>
<p>Topic 1 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic2">
<div>
<p>Topic 2 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
<a class="tab" data-tabid="topic3">
<div>
<p>Topic 3 title</p>
<p class="iconContainerMore">More</p>
</div>
</a>
</div>
<div class="tripctychContent-container">
<div class="field-class hideText" data-blockid="topic1">
<p>Topic 1 body</p>
</div>
<div class="field-class hideText" data-blockid="topic2">
<p>Topic 2 body</p>
</div>
<div class="field-class hideText" data-blockid="topic3">
<p>Topic 3 body</p>
</div>
</div>
Hope this helps!

Use jQuery Tabs within each function

I have this script so that I can make tabs very easy. But I can't have two, three, four and so on - tab function on the same page. I've tried to wrap into an each.function, but I just don't work for me. The tab changes on both rows at the same time :/
I use WordPress so the HTML markup is a little long so I've created a Codepen.
I also want this: if you click on the selected tab, I want it to be not active, like an accordion.
Markup here:
(function($) {
$('.section .row').each(function() {
$(this).find('.nav_wrap .tab').on('click', function() {
show_content($(this).index());
});
});
show_content(99); // choose 0 to start with first tab
function show_content(index) {
$('.row').each(function() {
// Make the content visible
$(this).find('.content_wrap .content.visible').removeClass('visible');
$(this).find('.content_wrap .content:nth-of-type(' + (index + 1) + ')').addClass('visible');
// Set the tab to selected
$(this).find('.nav_wrap .tab.selected').removeClass('selected');
$(this).find('.nav_wrap .tab:nth-of-type(' + (index + 1) + ')').addClass('selected');
});
}
})(jQuery);
.row {
background: lightblue;
margin-bottom: 80px;
}
.nav_wrap, .content_wrap {
display: flex;
}
.tab, .content {
padding: 20px;
}
.tab {
cursor: pointer;
}
.tab:hover,
.tab.selected {
background:pink;
}
.content_wrap .content {
display: none;
}
.content_wrap .content.visible {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="section">
<div class="row">
<div class="nav_wrap">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="content_wrap">
<div class="content">Tab 1 content goes here</div>
<div class="content">Tab 2 content goes here</div>
<div class="content">Tab 3 content goes here</div>
</div>
</div>
<div class="row">
<div class="nav_wrap">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="content_wrap">
<div class="content">Tab 1 content goes here</div>
<div class="content">Tab 2 content goes here</div>
<div class="content">Tab 3 content goes here</div>
</div>
</div>
</div>

Find the index of clicked element and add class to next content of clicked element based on clicked element index. Here I have updated your above code into one function. And I have checked if the clicked has selected class or not with hasClass() method. I guess this is what you are looking for.
(function($) {
$('.nav_wrap .tab').on('click', function() {
if(!$(this).hasClass('selected')) {
$(this).parent().find('.selected').removeClass('selected');
}
$(this).toggleClass('selected');
if(!$(this).parent().next().find('.content').eq($(this).index()).hasClass('visible')) {
$(this).parent().next().find('.visible').removeClass('visible');
} $(this).parent().next().find('.content').eq($(this).index()).toggleClass('visible');
});
})(jQuery);
.row {
background: lightblue;
margin-bottom: 80px;
}
.nav_wrap, .content_wrap {
display: flex;
}
.tab, .content {
padding: 20px;
}
.tab {
cursor: pointer;
}
.tab:hover,
.tab.selected {
background:pink;
}
.content_wrap .content {
display: none;
}
.content_wrap .content.visible {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="section">
<div class="row">
<div class="nav_wrap">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="content_wrap">
<div class="content">Tab 1 content goes here</div>
<div class="content">Tab 2 content goes here</div>
<div class="content">Tab 3 content goes here</div>
</div>
</div>
<div class="row">
<div class="nav_wrap">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="content_wrap">
<div class="content">Tab 1 content goes here</div>
<div class="content">Tab 2 content goes here</div>
<div class="content">Tab 3 content goes here</div>
</div>
</div>
</div>

Add / remove div for each button on click

I'm trying use append to give each button it's own div (.modal-item) that can be created and removed inside of the .modal container when the button is clicked. Each .item has it's own button and different content nested inside.
What I need as an example: If I click the button labelled Btn 1, I want a .modal-item div created inside of .modal that has the content from the Btn 1 .item. If I click Btn 1 again, it is removed. The same goes for each of the buttons.
The buttons should act as a checkbox for creating and removing the .modal-items. So in other words, the adding/removing of each .modal-item is handled by it's button.
$(function() {
$('#btn').click(function() {
var newDiv = $('<div class="modal-item"><h4><a>Dynamic Title</a></h4> </div>');
$('.modal').append(newDiv);
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button id="btn">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button id="btn">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button id="btn">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>

1st: id must be unique so you need to change id="btn" to class="btn"
2nd: by using data attribute for each btn and pass it to the modal-item div it can be done
$(function() {
$('.btn').click(function() {
var newDiv = $('<div data-btn="'+$(this).attr("data-btn")+'" class="modal-item"><h4><a>Dynamic Title'+ ($(this).closest('.item').index() + 1) +'</a></h4> </div>');
if($('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').length < 1 ){
$('.modal').append(newDiv);
}else{
$('.modal .modal-item[data-btn="'+$(this).attr("data-btn")+'"]').remove();
}
});
});
.container {
display: flex;
border: 1px solid blue;
}
.item,
.modal-item {
width: 100px;
border: 1px solid;
}
.modal {
display: flex;
border: 1px solid green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<button class="btn" data-btn="btn1">Btn 1</button>
<h4> Test 1 </h4>
<div class="subtitle"> Title 1 </div>
<div class="info"> This is Info / Description 1. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn2">Btn 2</button>
<h4> Test 2 </h4>
<div class="subtitle"> Title 2 </div>
<div class="info"> This is Info / Description 2. </div>
</div>
<div class="item">
<button class="btn" data-btn="btn3">Btn 3</button>
<h4> Test 3 </h4>
<div class="subtitle"> Title 3 </div>
<div class="info"> This is Info / Description 3. </div>
</div>
</div>
<div class="modal"></div>

positioning div classes next to another div using jquery

below is my current html layout, inside my .container class I have two <span> tags with classes of .download-btn and .save-btn. I want, whenever page load, remove those <span> from there and postioning near <div class="share"></div>
tag.
current layout
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
expected layout when page load
<div class="container">
<div class="col-md-6 col-center">
</div>
<div id="options">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
<div class="share"></div>
</div>
</div>
pls advice how to proceed using js ?

Using jQuery,
It can be done in a one line of code.
$("#options").prepend($(".save-btn")).prepend($(".download-btn"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share"></div>
</div>
</div>

Use prepend() to move the buttons to the beginning of the element with ID options:
$('#options').prepend($('.download-btn, .save-btn'));

In this example I'm removing this two buttons from their places, and append them before <div class="share"></div> (and I have added content "share" to this div to see the difference):
var downloadBtn = $('.download-btn');
var saveBtn = $('.save-btn');
$('.share').before(saveBtn).before(downloadBtn);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<span class="download-btn">download</span>
<span class="save-btn">save</span>
</div>
<div id="options">
<div class="share">share</div>
</div>

Use button for for the buttons. It's semantically correct and accessible.
$(window).on('load', function() {
var download = $('.download-btn'),
save = $('.save-btn'),
options = $('#options');
download.remove();
save.remove();
options.prepend(download, save);
});
.container {
border: .1rem solid red;
min-height: 5rem;
margin-bottom: 1rem;
}
#options {
border: .1rem solid blue;
min-height: 100px;
}
button {
padding: 1rem;
background-color: #ddd;
display: inline-block;
margin: .5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="col-md-6 col-center">
<button class="download-btn">download</button>
<button class="save-btn">save</button>
</div>
</div>
<div id="options">
<div class="share"></div>
</div>

Remove class from div with loop/array

I have 4 divs with same Class and Id. What I am looking for is to remove display-none-class on that specific div whenever #button is clicked.
What I have done now is to give an additional class name to each div so they are more "recognizable" for jQuery.
Here is my code:
html
<div class="parentdiv">
<h3 id="button">remove class</h3>
<div class="display-none" id="element">
Show me on button click
</div>
</div>
jquery
$('h3#button').each(function(i){
$(this).addClass('remove-btn-' + (i+1));
});
$('div#element').each(function(i){
$(this).addClass('remove-this-' + (i+1));
});
So What I am looking for is to loop through remove-this-1, remove-this-2 etc and remove display-none class when ever remove-btn-1, remove-btn-2 etc is clicked.

Use one more class to the div which has display-none class
give same class to each button
wrap them in a parent them
use this to achieve your goal
Whenever you click on the button, it will look for class box of current clicked the button. For demo purpose - I have applied CSS to display-none class, So that you can see changes.
$(document).ready(function(){
$('.button').click(function(){
$(this).prev('.box').removeClass('display-none');
});
});
.display-none {
display: inline-block;
padding: 5px;
background: tomato;
color: #fff;
border-radius: 3px;
}
.button {
display: inline-block;
padding: 5px;
background: steelblue;
color: #fff;
border-radius: 3px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<div class="display-none box">Lorem ispum 0...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 1...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 2...</div>
<p class="button">Remove Class</p>
</div>
<div class="parent">
<div class="display-none box">Lorem ispum 3...</div>
<p class="button">Remove Class</p>
</div>

Are you looking for something like this
$('.button').click(function(){
$(this).next().removeClass('display-none');
});
.display-none{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 1
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 2
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 3
</div>
</div>
<div class="parentdiv">
<h3 class="button">remove class</h3>
<div class="display-none element">
Show me on button click 4
</div>
</div>

First of all the id (#) value has to be unique. I suggest you creating unique ids.
For removing a class from an element with jquery you can use the .removeClass('class_name')