We Keep Coding

I can't handle to select the correct div (using Jquery)

$(document).ready(function() {
$(".myClass").click(function () {
$(".myClass", $(this)).first().scrollIntoView({behavior: "smooth",block: "start"});
});
});
.myClass {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=myClass>I click on this div
</div>
<div class=otherClass>Some random text
</div>
<div>
<div class=otherClass>Some random text
</div>
<div>
<div class=myClass>I want to scroll to this div
</div>
Here is my problem, i have this pattern that repeats itself several times in my page. Div having the class "otherClass" are generated dynamically in variable quantity.
<div>
<div class=myClass>
</div>
</div>
<div>
<div class=otherClass>
</div>
</div>
<div>
<div class=otherClass>
</div>
</div>
<div>
<div class=myClass>
</div>
</div>
My goal is by clicking on a "myClass" div to scroll down the window (using scrollIntoView()) to the next div with the same class.
I added a click event on each "myClass" div but i can't manage to select the next one. I tried to add a context to my selector $(".myClass", $(this)) to search only after the clicked div but it doesn't work (always returning me the current div ?).
I also tried using next() to "move" to the next div but i'm struggling with the fact that there is an unknown numbers of "otherClass" div between them.
What am i doing wrong ?
Sorry if my explanation isn't clear and thank you for your help.

Up to your html structure .myClass doesn't have any next .myClass on its level .. See the next code
$('.myClass').on('click' , function(){
$(this)
.parent() // select the parent div
.nextAll('div:has(.myClass)') // select the next div which has .myClass in it
.first() // select just one div next
.find('.myClass') // find the .myClass in this div
.addClass('Next'); // add class to it
});
.Next{
background : red;
color : #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class=myClass>myClass</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=myClass>myClass</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=myClass>myClass</div>
</div>
Additional: if you need to reverse you'll need to use prevAll instead of nextAll and .last() instead of .first()

This will work no jQuery needed.
Here is the fiddle example: https://jsfiddle.net/e1xz74wj/
JS
let scrollToNext = 0;
const elements = document.querySelectorAll('.myClass');
document.getElementById('btn').addEventListener('click', () => {
++scrollToNext
if (scrollToNext < elements.length) {
elements[scrollToNext].scrollIntoView();
}
})
Explanation:
Increment the counter after clicking on the button to scroll to the desired element (finding element by specified className).
Each time a click occurs the counter is incremented by one hence the next element is selected. When the counter reaches the max amount of found elements it doesn't increment anymore.

Toggle display shows the hidden element for a second

I'm trying to show a hidden text on click of a button. But when I load the page, the text shows for a second and then disappears. Why would that happen?
<div class="container">
<p class="temp">This is temporary</p>
<button id="showme">Show</button>
</div>
$(document).ready(function() {
$(".temp").hide();
$("#showme").on("click", function() {
$(".temp").show();
});
});

Try to understand how the webpage loads. Your jquery is executed when the entire page is rendered with the associated CSS. So the browser displays your text for a second till it executes jquery to hide that text. So your browser needs to know that this text is hidden while parsing the html. You can do this by giving a CSS style to the text.
CSS:
.temp {
display: none;
}
HTML:
<div class="container">
<p class="temp">This is temporary</p>
<button id="showme">Show</button>
</div>
JS:
$(document).ready(function() {
$("#showme").on("click", function() {
$(".temp").show();
});
});

You should use inline style tag in <p> tag like this:
<p class="temp" style="display: none;">This is temporary</p>
instead of hiding it from jQuery!
$(document).ready(function() {
$("#showme").on("click", function() {
$(".temp").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="temp" style="display: none;">This is temporary</p>
<button id="showme">Show</button>
</div>

Collapsible container/column. Adding more than one link

I'm trying to create a drop down effect similar to this image: GIF, however with what I have so far: EXAMPLE I can't seem to figure out a way to add more than one link, if I do add just another content div it doesn't show up.. Hope someone can help, been losing sleep over this haha. Thanks
HTML:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
</div>
JS:
$(".header").click(function() {
$header = $(this);
//getting the next element
$content = $(this).next();
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});
What I would try:
<div class="container">
<div class="header">Projects</div>
<div class="content" onclick="initContent('example')"><em>Example Project</em></div>
<div class="content" onclick="initContent('exampleNew')"><em>Example Project 2</em></div>
</div>

Just put all your links in a single content div:
https://jsfiddle.net/sfcm95yz/3/
<div class="content">
<div class="item" onlclick="initContent('example')">
<em>Example Project</em>
</div>
<div class="item" onlclick="initContent('example2')">
<em>Example Project 2</em>
</div>
</div>

It's because you are sliding down the content div that is right after the header class element ($content = $(this).next();), which applies a display: block to it. If you add another content div, it isn't going to be right after that header and so won't be shown.
You can either change your JavaScript to target all content divs, or rearrange your HTML, something like this:
<div class="container">
<div class="header">Projects</div>
<div class="content">
<div onclick="initContent('example')">
<em>Example Project</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 2</em>
</div>
<div onclick="initContent('example')">
<em>Example Project 3</em>
</div>
</div>
</div>

If you want to modify your JS and keep the existing markup, .nextAll() will select all of $header's siblings (.next() only selects one sibling). You can also add a selector argument to be sure you only select elements with the class "content".
$(".header").click(function() {
$header = $(this);
//getting the sibling ".content" elements
$content = $(this).nextAll(".content");
//checking if its already visible
$content.slideToggle(500, function() {
//execute this after slideToggle is done
//change text of header based on visibility of content div
$header.text(function() {});
});
});

Show/Hide div with sub div using button click JavaScript

How can I make a div show/hide with a sub div like:
<div class="form-group" style="display:none;">
<div id="tabicon" style="display:none;">
<span>ICON</span>
</div>
<div id="tabimages" style="display:none;">
<span>IMAGES</span>
</div>
</div>
<div id="button_tab">
<input type="button" name="btnicon" value="icon">
<input type="button" name="btnimages" value="images">
</div>
So that when I click btnicon, the tab icon is opened/showing and
when I click btnimages, the tab images is opened/showing, with the tab icon hidden?

Do it with simple jquery by defining which div has to shown on which button click.
$('btnicon').on('click', function(){
$('#tabicon,.form-group').show();
});
$('btnicon').on('click', function(){
$('#tabimages,.form-group').show();
});
If you want to show this div and hide another div on button click use this
$('btnicon').on('click', function(){
$('#tabicon,.form-group').show();
$('#tabimages').hide();
});
$('btnicon').on('click', function(){
$('#tabimages,.form-group').show();
$('#tabicon').hide();
});

$('input[name=btnicon]').click(function(){//icon click
$('#tabicon').show()//show icon div
$('#tabimages').hide()//hide image div
}).click()//manually call click to show icon div on load
$('input[name=btnimages]').click(function(){//image click
$('#tabicon').hide()//hide icon div
$('#tabimages').show()//show image div
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div id="tabicon" style="display:none;">
<span>ICON</span>
</div>
<div id="tabimages" style="display:none;">
<span>IMAGES</span>
</div>
</div>
<div id="button_tab">
<input type="button" name="btnicon" value="icon">
<input type="button" name="btnimages" value="images">
</div>

Try this : You have to remove display:none from parent div as this will hide all its child elements. Create button handler and use .show() and .hide() methods as shown below -
HTML:
<div class="form-group">
<div id="tabicon" style="display:none;">
<span>ICON</span>
</div>
<div id="tabimages" style="display:none;">
<span>IMAGES</span>
</div>
</div>
<div id="button_tab">
<input type="button" name="btnicon" value="icon">
<input type="button" name="btnimages" value="images">
</div>
jQuery:
$(function(){
$('input[name="btnicon"]').click(function(){
$('#tabicon').show();
$('#tabimages').hide();
});
$('input[name="btnimages"]').click(function(){
$('#tabicon').hide();
$('#tabimages').show();
});
});

Instead of setting the "hidden" properties directly to the elements you are hiding/displaying you could set the properties through adding and removing classes to the parent container. "form-group".
.parent-class, #tabicon, #tabimage {
display: none;
}
.parent-class.icon-class, .parent-class.image-class {
display: block;
}
.parent-class.icon-class #tabicon{
display: block;
}
.parent-class.image-class #tabimage {
display: block;
}
This way when you add the class to the parent container you will show hide the parent container based on it having either of the childs active. The current child you have set to active will also be visible based on which classes are active in the parent container.
If none of the childs are active the parent container will be hidden.

How to toggle (jQuery) with an anchor

I have a small problem with jQuery.
The situation:
I have a piece of jQuery code, where I toggle results.
JS Code:
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return true; //Prevent the browser jump to the link anchor
});
Now I want to open - toggle an item on anchor position from the URL like (http://x.com/page.php#toggleItem2)
Question:
How read toggleItem2 from URL and open exactly this section?
Additional:
HTML Code:
<div class="container">
<h2 class="acc_trigger">Item1</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 1
</div>
</div>
<h2 class="acc_trigger">Item2</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 2
</div>
</div>
<h2 class="acc_trigger">Item3</h2>
<div class="acc_container">
<div class="block">
Inner Text in toggle 3
</div>
</div>
</div>
I hope the problem is clearly defined.

You should give your divs IDs according to the anchors, e.g.
<h2 class="acc_trigger">Item1</h2>
<div id="toggle1" class="acc_container">
<div class="block">
Inner Text in toggle 1
</div>
</div>
You can get the document fragment from the location object:
document.location.hash
Then it is simply (assuming the other containers are all hidden):
$(document.location.hash).slideDown().prev().addClass('active');

Try jquery toggle itself
http://api.jquery.com/toggle/

This is held within the window.location.hash variable.

You can do something like this:
http://jsfiddle.net/b6Znw/
Javascript:
$().ready(function(){
$('.acc_trigger a').click(function(){
$(this).closest('.acc_trigger').next('.acc_container').toggle()
return false;
})
})