We Keep Coding

Toggling the class of a div to show/hide content based on which button is clicked

I am trying to show/hide a list of menu items based on which button is clicked for that particular category. Most Popular is seen by default/on page load. So for example when I click on the Appetizers button the page should go from this to this.
I am still very new to jQuery and JavaScript so I am having some difficulties getting this to work. Here is the HTML (condensed, just wanted to show what was seen in the screenshots and not all of the other menu items):
<div class="menu-container">
<div class="menu-preview">
<div class="menu-preview-items active">
<h2>Most Popular</h2>
<div class="menu-listing">
<h3>California Roll (8 Pieces)</h3>
<p>Imi crab, cucumber, avocado, and mayo with sesame</p>
<p>$3.50</p>
</div>
<div class="menu-listing">
<h3>Dynamite Roll (8 Pieces)</h3>
<p>Two pieces prawn tempura, yam, cucumber, avocado, masago, letters, and mayo with sesame</p>
<p>$4.95</p>
</div>
</div>
<div class="menu-preview-items hidden">
<h2>Appetizers</h2>
<div class="menu-listing">
<h3>Edamame</h3>
<p>Boiled green soy bean with salt.</p>
<p>$3.50</p>
</div>
<div class="menu-listing">
<h3>Gomae</h3>
<p>Blanched spinach with sesame seed and peanut sauce.</p>
<p>$3.50</p>
</div>
</div>
</div>
<div class="menu-categories">
Most Popular
Appetizers
A La Carte
BBQ
Salad & Soup
Tempura
</div>
</div>
Here is the CSS for the classes of .active and .hidden (as well as the container):
.active {
display: none;
}
.hidden {
display: contents;
}
.menu-container {
margin-top: 15px;
display: flex;
justify-content: space-evenly;
}
Here is the script that I have so far as well (which is placed at the very bottom of the document, just above the closing body tag):
$('.menu-box').click(function () {
$('.menu-preview-items').toggleClass('.active');
// alert('Hello!');
});
I will of course be adding more menu items for all the categories over time, I just wanted to try and get this to work before I commit to doing so. Should I be adding id's to anything? Do I need to add/edit any of my class names? Any help would be greatly appreciated!

You can try this:
change css
.active {
display: block;
}
.hidden {
display: none;
}
.menu-container {
margin-top: 15px;
display: flex;
justify-content: space-evenly;
}
The html part
<div class="menu-container">
<div class="menu-preview">
<div class="menu-preview-items active most-popular">
<h2>Most Popular</h2>
<div class="menu-listing">
<h3>California Roll (8 Pieces)</h3>
<p>Imi crab, cucumber, avocado, and mayo with
sesame</p>
<p>$3.50</p>
</div>
<div class="menu-listing">
<h3>Dynamite Roll (8 Pieces)</h3>
<p>Two pieces prawn tempura, yam, cucumber,
avocado, masago, letters, and mayo with sesame</p>
<p>$4.95</p>
</div>
</div>
<div class="menu-preview-items hidden appetizers">
<h2>Appetizers</h2>
<div class="menu-listing">
<h3>Edamame</h3>
<p>Boiled green soy bean with salt.</p>
<p>$3.50</p>
</div>
<div class="menu-listing">
<h3>Gomae</h3>
<p>Blanched spinach with sesame seed and peanut sauce.</p>
<p>$3.50</p>
</div>
</div>
</div>
<div class="menu-categories">
Most Popular
Appetizers
A La Carte
BBQ
Salad & Soup
Tempura
</div>
</div>
Now the JQuery
$('.menu-categories .menu-box').on('click',function(){
$('.menu-preview-items').addClass('hidden');
$('.menu-preview-items').removeClass('active');
$('.'+$(this).attr('ref')).removeClass('hidden');
$('.'+$(this).attr('ref')).addClass('active');
});

You can have this done with JavaScript. Set the elements you want to show and hide by giving each and id. In your JavaScript file, set those elements to what you want when the event to trigger this is clicked. There are different ways to go about this. You can use pure JavaScript by doing:
document. getElementById('name of id').remove() or use the CSS, document. getElementById('name of id').style.display = 'none' or 'block' based on displaying the elements or hiding the elements.
If you have further questions, do not hesitate to ask

You are missing some way of linking the menu container click to the menu contents.
You will need to add ids to every div that has the menu-listing class.
Each of your menu-box links need to somehow know which menu-listing to activate. You also need to de-activate all of the other menu-listings.
I'd recommend using data-* attributes. These allow you to add attributes to any DOM element. In this case, you'd add a data attribute to your menu-box links that reference the menu-listing you care about. It would look something like this:
The menu listing:
<div id="most-popular" class="menu-preview">
...
</div>
The menu box:
Most Popular
And finally, the jquery:
$('.menu-box').click(e => {
let id = e.target.data('menu-listing');
// first remove the class from all items
$('.menu-preview-items').removeClass('.active');
// now add back the active class for the item we care about
$(`#${id}`).addClass('.active');
});

You could user the .hide() and .show() functions in jQuery if you would prefer:
$(document).ready(function () {
$("#item2").hide();
$("#item3").hide();
$("#item4").hide();
});
function showItem(id) {
// Hide all of the items
$('.items').hide();
itemId = "item" + id;
$("#" + itemId).show();
};
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.buttons-container {
display: flex;
flex-direction: row;
justify-content: space-between;
width: 300px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="items-container">
<p id="item1" class="items">Item1</p>
<p id="item2" class="items">Item2</p>
<p id="item3" class="items">Item3</p>
<p id="item4" class="items">Item4</p>
</div>
<div class="buttons-container">
<a id="btn1" href="#" onclick="showItem(1)">Btn1</a>
<a id="btn2" href="#" onclick="showItem(2)">Btn2</a>
<a id="btn3" href="#" onclick="showItem(3)">Btn3</a>
<a id="btn4" href="#" onclick="showItem(4)">Btn4</a>
</div>
</div>
What this code does it hides all but the first item on document.ready (You could just set these to your hidden class). Then when you click on an item it hides all items with the class items and then shows the item corresponding with the button you clicked.

jQuery not child of class

If I have:
<div class="wrapper">
<div>
<div class="list">
</div>
</div>
<div class="wrapper">
<div class="list">
</div>
</div>
<div class="list">
</div>
</div>
When I have a jQuery instance of a 'wrapper' div, how can I find things in that div, but not in any child 'wrapper' div?
I want to wrapper.find('.list') and get the first and third lists, but not the second. wrapper.find('.list').not('.wrapper .wrapper *') seems to work, but not sure if there's something better.

I think you might be looking for something like this:
var $target = $(".wrapper .list").filter(function(){
return $(this).parents(".wrapper").length === 1;
});
$target.css("background-color", "coral");
div{
min-height: 10px;
min-width: 10px;
padding: 10px;
border: solid 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div>
<div class="list"></div>
</div>
<div class="wrapper">
<div class="list"></div>
</div>
<div class="list"></div>
</div>

Use selector :only-child.
For your example :
$('.wrapper:only-child').children('.list');
Will only return all the first level '.list' divs.

I guess something like this could solve your problem:
$( ".wrapper:first" ).children( ".list" )
Where $( ".wrapper:first" ) would get only the first appearance of .wrapper, and children( ".list" ) would get only its children
I hope that's what you are looking for

IE hides div element when certain class is used, works fine in chrome/firefox, does anyone have information on this error?

So, I am using oracle apex and I use JavaScript to populate a div tab and add the element to a hidden region on the current page. The resulting HTML is below:
<div class="t-ButtonRegion **t-Form--floatLeft** t-ButtonRegion--noPadding t-ButtonRegion--noUI" id="main_details" role="group" aria-labelledby="main_details_heading">
<div class="t-ButtonRegion-wrap">
<div class="t-ButtonRegion-col t-ButtonRegion-col--left"><div class="t-ButtonRegion-buttons"></div></div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--content">
<h2 class="t-ButtonRegion-title" id="main_details_heading">Main Panel</h2>
<div class="container">
<div class="row">
<div class="col col-12 ">
<div class="t-ButtonRegion t-Form--floatLeft t-ButtonRegion--noPadding t-ButtonRegion--noUI" id="other_details" role="group" aria-labelledby="other_details_heading">
<div class="t-ButtonRegion-wrap">
<div class="t-ButtonRegion-col t-ButtonRegion-col--left"><div class="t-ButtonRegion-buttons"></div></div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--content">
<h2 class="t-ButtonRegion-title" id="other_details_heading">Details</h2>
<div class="t-ButtonRegion-buttons"></div>
</div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--right"><div class="t-ButtonRegion-buttons"></div></div>
</div>
<div id="divide" style="margin: 5px 5px 15px; padding: 20px 15px 20px 20px; **position: fixed;** background-color: rgb(222, 239, 251);"><h3 id="header1">B.2.1</h3><p id="paragaph1">Organizational system for the environmental program that defines staff roles and responsibilities, etc,etc </p></div></div>
</div>
</div>
</div>
<div class="t-ButtonRegion-buttons"></div>
</div>
<div class="t-ButtonRegion-col t-ButtonRegion-col--right"><div class="t-ButtonRegion-buttons"></div></div>
</div>
</div>
I starred the two spots that if removed would fix the issue of the divide element not appearing on the screen. Not both, either one or the other. I needed a fix position so i removed the floatLeft. Would anyone know why this floatLeft class would cause the divide element to not show. Note: only time this occurs is in IE, Firefox and chrome work fine with the above code. Any help is appreciated.
Edit: I looked for the css after the suggestion and got:
.t-Form--floatLeft{overflow:hidden}
.t-Form--floatLeft .col{width:auto!important}
.t-Form--floatLeft .t-Form-fieldContainer{width:auto;float:left;clear:none}
.t-Form--floatLeft .t-Form-labelContainer{min-width:0;width:auto}
.t-Form--floatLeft .t-Form-inputContainer select{max-width:100%}
I have more to go off of now, so I am researching still but if anyone has ideas, please let me know.

How to change the text inside a div by hovering over other elements

So basically I am making some concept logic for a project I am working on. It's a portfolio with boxes of images and I want to be able to change the value of a h2 to some description text based on the box that was hovered on.
Right now it's just a black box so 'square1, square2, square3...etc' will work for now. I looked up some stuff on jquery and found this link from a stackoverflow answer. This does what I need but is only shifting through one piece of information instead of many in my case.
Wondering how I can achieve that via jquery. I imagine I would need to make an array with all the descriptions I need, and (this is where I am lost) somehow attach the value of array to the square and then from there change text of h2 to the array value.
Thanks for any help in advance here's what I have so far (not much just did some foundation work). Not sure if this matters but if there is no hover I want the h2 to say nothing.
HTML (makes me post code if I have jsfiddle)
<div class="squares">
<div class="square1"></div>
<div class="square2"></div>
<div class="square3"></div>
<div class="square4"></div>
<div class="square5"></div>
<h2 class="squareIdent"> </h2>
</div>

You can implement this using data attribute to hold your description that you want your box to load in the h2 -
Working Example - http://codepen.io/nitishdhar/pen/CdiHa
Explanation
Write your HTML in this structure -
<div class="squares">
<div class="square" data-content="Alpha"></div>
<div class="square" data-content="Beta"></div>
<div class="square" data-content="Gamma"></div>
<h2 class="square-data-holder"></h2>
</div>
Notice I have added data-content that will hold whatever text you want it to hold. We will use this to extract the same when we have to fill it in the h2.
Use this jQuery snippet to achieve the hover effect -
$(document).ready(function() {
$('.square').hover(
function() {
$('.square-data-holder').text($(this).data('content')).fadeIn('slow');
}, function() {
$('.square-data-holder').fadeOut('slow');
});
});
hover() takes two handlers to handle hover in & hover out - $( selector ).hover( handlerIn, handlerOut ), Refer - http://api.jquery.com/hover/
So on hover of any of the div's with class square, we get hold of the content of the div that was hovered using -
$(this).data('content')
And we append the same to the h2 element. On hover out, we just make h2 empty.
This should do what you want.

Judging by the example at http://danielmarkiewicz.com/ it looks like you may need to have formatted content inserted into the heading. Here is one approach to do that with HTML content inside each square.
Demo here
HTML
<div class="squares">
<div class="square square1">
<span class="heading">
<h1>Square 1</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square2">
<span class="heading">
<h1>Square 2</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square3">
<span class="heading">
<h1>Square 3</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square4">
<span class="heading">
<h1>Square 4</h1>
<h2>Details</h2>
</span>
</div>
<div class="square square5">
<span class="heading">
<h1>Square 5</h1>
<h2>Details</h2>
</span>
</div>
<header class="squareIdent"></header>
</div>
CSS
.heading { display: none; } // Hide the heading content within Squares
JavaScript
$(document)
.on('mouseover', '.square', function(e) {
var self = $(this),
headingContent = self.find('.heading').first().html();
$('.squareIdent', self.closest('.squares')).html(headingContent);
})
.on('mouseout', '.square', function(e) {
var self = $(this);
$('.squareIdent', self.closest('.squares')).html(null);
})
;

DEMO
I am probablly late as Nitish already gave a good answer but here is what i have done.
HTML:
<div class="squares">
<div class="square1" data-text="I am Square 1"></div>
<div class="square2" data-text="I am Square 2"></div>
<div class="square3" data-text="I am Square 3"></div>
<div class="square4" data-text="I am Square 4"></div>
<div class="square5" data-text="I am Square 5"></div>
<h2 class="squareIdent"> </h2>
</div>
CSS:
div.square1, div.square2, div.square3, div.square4, div.square5
{
height: 100px;
width: 100px;
background-color: black;
margin-left: 126px;
margin-top: 150px;
float: left;
}
div.squares
{
margin-left: 175px;
}
.squareIdent{
opacity: 0;
}
JS:
$(".squares > *").hover(function(){
$(".squareIdent").text($(this).attr("data-text"));
$(".squareIdent").stop().animate({
opacity: 1
}, 500);
}, function(){
$(".squareIdent").stop().animate({
opacity: 0
}, 500);
});
Note i have added the Animation as you showed in your question.

Two rows of divs floating right

I am working on a responsive web design that positions divs floated right, but in two rows.
Once the container div becomes two narrow, the tile divs will move down to form a new row.
For example
<div id="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
.tile {
height:96px;
width:96px;
}
Would display three divs in the first row, and two more in a row under the first row.
If the page is re-sized and the container becomes two narrow for the first row, div tiles should move to form a new row.
Thanks!

you have to nest the first 3 divs and the second 2 divs. You also need to 'divide' these 2 divs, so they build 2 rows (done with css:clear) in order to achieve what you pretend:
html:
<div id="container">
<div class="firstrow">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
<div class="clear"></div>
<div class="secondrow">
<div class="tile"></div>
<div class="tile"></div>
</div>
</div>
css:
.tile {
height:96px;
width:96px;
float:right;
border: 1px solid red;
}
.clear{clear:both;}
see the example here: http://jsfiddle.net/hbrunar/R59Qe/1/

I assume you're looking for this?
.tile {
height:96px;
width:96px;
float: left;
}

You should add "float:left" property to your class="tile", otherwise it will just render all div one below other.
Thanks.