Develop Reference

javascript function to selectively show and hide contents by Id

I am working on a project where I want to show page contents selectively.
Have buttons "next" and "previous"
contents are id-ed in a serial manner.
what I want to achieve is
at the first page loading, show the first content(id='item-0') and only show the "next" button since there is no previous content, and when click on "next" button, hide currently showing contents(id='item-0') and show all the contents that are in (id='item-1') and so forth, and do not show the "next" button when it's the last content.
this is what I got so far,
on the page I first load every contents with display: none; so, nothing's showing up of course. but I want to be able to show the first content(id="item-0") by changing the style display to inline-block. and then update the "which" that's in the "next" button onclick action to the next id which is id="item-1" and dynamically update this "which" whenever either "next" or "previous" buttons clicked.
// page when first loaded.
<div class="container p-0 m-0" id="item-0" style="display:none;">
<p>example data</p>
<img src="example.com/img.png">
<video src="abc.com/abc/def.mp4"></video>
</div>
<div class="container p-0 m-0" id="item-1" style="display:none;">
<img src="example.com/img-5.png">
<video src="abc.com/abc/def.mp4"></video>
<div class="row"><h1>ABCD</h1></div>
</div>
<div class="container p-0 m-0" id="item-2" style="display:none;">
<p>example data</p>
<p>example data 2</p>
</div>
<a class="btn" onclick="nextBtn('item-0','item-1')">Next</a>
<a class="btn" onclick="prevBtn('item-0',null)" style="display:none;">Prev</a>
So far I worked on:
function show_item(which) {
var element = document.getElementById(which)
element.style.display='inline-block';
}
function hide_item(which) {
var element = document.getElementById(which)
element.style.display='none';
}
function nextBtn(current_which, next_which) {
// e.g. current_which = "item-0", next_which = "item-1"
hide_item(current_which);
show_item(next_which);
}
function prevBtn(current_which, prev_which) {
// e.g. current_which = "item-1", prev_which = "item-0"
hide_item(current_which);
show_item(prev_which);
}
what I haven't figured out are:
how to update the current_which and next_which that go in to the "Next" and "Prev" buttons.
how to not show "Prev" button when the page is showing the first content, and how to now show "Next" button when the page is showing the last content.

I have prepared something for you. If it is not exactly what you are looking for, I hope it'll you give some general idea on how to achieve what you want.
var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var elements = document.getElementsByClassName('container')
//get the currentDiv ID
var currentDiv = 0;
//when next is clicked
next.addEventListener('click',function(){
//we first check if the viewed div is not the last one
if(currentDiv < 2){
//if not we remove the .active class
removeActive(currentDiv);
//increment the ID of the current ID
currentDiv += 1;
//and add .active class to the next DIV
addActive(currentDiv)
}
})
prev.addEventListener('click',function(){
//same thing with prev, we first test if the current div is not the first one
if(currentDiv > 0){
//if not we remove the .active class
removeActive(currentDiv);
//decrement the selected div
currentDiv -= 1;
//and add the .active class
addActive(currentDiv);
}
})
//below are 2 functions that handles the addActive & removeActive if the conditions are passed
function removeActive(currentDiv){
document.getElementById('item-'+currentDiv).classList.remove('active');
}
function addActive(currentDiv){
document.getElementById('item-'+currentDiv).classList.add('active');
}
.container.hide {
display: none;
}
.active {
display: block !important;
}
.btn {
cursor: pointer;
}
<div class="container active hide p-0 m-0" id="item-0">
<p>example data</p>
<h3>Image For Div 1</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Smart-Watch.jpg" width="100px" height="100px"/>
</div>
<div class="container hide p-0 m-0" id="item-1">
<p>example data</p>
<h3>Image For Div 2</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Wireless-Phone-Chargers.jpg" width="100px" height="100px"/>
</div>
<div class="container hide p-0 m-0" id="item-2">
<p>example data</p>
<h3>Image For Div 3</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Phone-Lenses.jpg" width="100px" height="100px"/>
</div>
<br/><br/><br/>
<a class="btn prev">Prev</a>
<a class="btn next">Next</a>

Here is a slightly more condensed version of a working script:
const btn = document.querySelectorAll('.btn'), // btn[0]: Prev, btn[1]: Next
divs = document.querySelectorAll('.container');
function render(n){
[n,n!==divs.length-1].forEach((c,i)=>btn[i].style.visibility=c?null:"hidden"); // show/hide buttons
divs.forEach((d,i)=>d.classList.toggle("hide",i!==n)); // show/hide divs
}
render(divs.curr=1); // define the starting div
btn.forEach(b => b.onclick = () => {
render( divs.curr += (b.textContent==="Next" ? 1 : -1) );
});
.hide { display: none; }
.btn { cursor: pointer; }
<div class="container hide p-0 m-0" id="item-0">
<p>example data</p>
<h3>Image For Div 1</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Smart-Watch.jpg" width="100px" height="100px" />
</div>
<div class="container hide p-0 m-0" id="item-1">
<p>example data</p>
<h3>Image For Div 2</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Wireless-Phone-Chargers.jpg" width="100px" height="100px" />
</div>
<div class="container hide p-0 m-0" id="item-2">
<p>example data</p>
<h3>Image For Div 3</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Phone-Lenses.jpg" width="100px" height="100px" />
</div>
<div class="container hide p-0 m-0" id="item-3">
<p>example data</p>
<h3>Image For Div 4</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Thumb-224.jpg" height="100px" />
</div>
<div class="container hide p-0 m-0" id="item-4">
<p>example data</p>
<h3>Image For Div 5</h3>
<img src="https://www.cloudways.com/blog/wp-content/uploads/Thumb-221.jpg" height="100px" />
</div>
<br/><br/><br/>
<a class="btn prev">Prev</a>
<a class="btn next">Next</a>
I designed the script to have a small footprint, i. e. only a few global variables - or better - constants: btn and divs. In divs.curr you will find the index of the currently "active" div.
This script is also open for changes to the markup: The number of divs can change to any number.

using javascript container blinking and remove and add CSS classes at same time when hover over another child container

I have a problem where I'm making a card photo 1 that contains an invisible child container that has buttons and when mouse over it appears above the parent element photo 2, I have mouse out event that hides the child div and the problem is that the event occurs also when the mouse over the child div which cause the blinking of the child div (add CSS class that makes it visible and removes it at the same time, check attached gif)
addHandlerHoverCardView(handler) {
var card;
// parent element is movie-list
this._parentElement.addEventListener("mouseover", function (e) {
card = e.target.closest(".card");
if (card != null) {
handler(card, 'show');
}
})
this._parentElement.addEventListener('mouseout', function (e) {
const data = e.target.closest('.hover-div');
if (data != null) {
handler(card, 'hide');
}
})
}
<div class="movie-list">
<div class="movie-details">
<div class="card"
onmouseout="hideBottomCard()" onmouseover="showBottomCard()">
<img src="image\176630.jpg" alt="">
<div class="hover-div">
<div class="item">
<img src="image\active-my-list.png" alt="">
<img src="image\active-favourite.png" alt="">
<img src="image\active-watch-later.png" alt="">
</div>
</div>
</div>
<h5>2015 / Fiction, Drama</h5>
<h4>The Wolf Of Wall Street</h4>
</div>
</div>

You can try adding the onmouseout and onmouseover attr to the image, not the div.
<div class="movie-list">
<div class="card"
>
<img src="image\176630.jpg" alt="" onmouseout="hideBottomCard()" onmouseover="showBottomCard()">
<div class="hover-div">
<div class="item">
<img src="image\active-my-list.png" alt="">
<img src="image\active-favourite.png" alt="">
<img src="image\active-watch-later.png" alt="">
</div>
</div>
</div>
<h5>2015 / Fiction, Drama</h5>
<h4>The Wolf Of Wall Street</h4>

how can I show a div based on content in another div jQuery

I have multiple divs in html such:
<div class="litter">
<div class="litter-1">
<div class="status">Available</div>
<div class="available"><img /></div>
</div>
<div class="litter-2">
<div class="status">Available</div>
<div class="available"><img /></div>
</div>
</div>
The status text will vary based on user input. If the status is available the available class should not show. But if the status is unavailable then it should. The image is present all the time but only displaying if the status changes.
I can get the jQuery to either hide all of the images, or show them all, but not based on the html value of the status.
jQuery
if($('.litter > .status').html()==="Available") {
$(this).next('.available').hide();
} else {
$('.available').show();
}
Any help?

You could use a loop using jQuery .each():
// change selector to '.litter .status'
$('.litter .status').each(function() {
// loop through each .status element
// get partner img container .available
var imgContainer = $(this).parent().find('.available');
if ($(this).text() === "Available")
{
imgContainer.hide();
}
else
{
imgContainer.show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="litter">
<div class="litter-1">
<div class="status">Available</div>
<div class="available"><img src="https://via.placeholder.com/150/" alt="placeholder1" /></div>
</div>
<div class="litter-2">
<div class="status">Other status</div>
<div class="available"><img src="https://via.placeholder.com/150/" alt="placeholder2" /></div>
</div>
</div>

You can toggle a single class, status-available, and combine it with the adjacent sibling combinator to control the display of the image.
<!-- Image will show -->
<div class="status status-available">…</div>
vs.
<!-- Image will not show -->
<div class="status">…</div>
Example
/* Image is hidden by default */
.available > img {
display: none;
}
/* Adjacent sibling combinator in action */
.status-available + .available > img {
display: block;
}
<div class="litter">
<div class="litter-1">
<div class="status status-available">Available</div>
<div class="available">
<img src="http://placekitten.com/150/150" alt="Cute cat" />
</div>
</div>
<div class="litter-2">
<div class="status">Available</div>
<div class="available">
<img src="http://placekitten.com/150/150" alt="Cute cat" />
</div>
</div>
</div>

Ok, so Haldo put me on the right track, but in order to make it all come together with the string. Instead of if ($(this).text() === ("Available") I had to use this if ($(this).text().indexOf('Needs a Forever Home') > -1)
The rest of the code stays the same as Haldo's.

How can show <div> and <a> in ascending order when page loads using jquery?

I have some listings. At present when page loads listing is showing like
Img 1
Test 1
Img 3
Test 3
img 2
Test 2
When page loads, I need results like
Img 1
Test 1
Img 2
Test 2
Img 3
Test 3
Img is in <a> tag and test content is in <div> tag
How can order the <div> and <a> in ascending order when page loads?
In <div> tag there is data-id. In <a> tag there is data-tag-id.
Html
<figure class="image_container">
<img src="files/maier-energie-umwelt/produkte/phantom-ruehrwerke/Phantom-1400.jpg" alt="" width="738" height="800">
<figcaption class="caption">
<a class="area center-bg hasDescription" href="javascript:void(0)" title="Verschleißfester Propeller aus PA12" data-description-id="areaDesc-1" style="width: 6.775%;height: 18.75%;left: 14.228%;top: 1.25%;background-image: url(files/maier-energie-umwelt/layout/marker.png);" data-tag-id="1"></a>
<div id="areaDesc-1" class="description invisible" data-id="1" style="display: block;"><p><strong>Test1</p></div>
<a class="area center-bg hasDescription" href="javascript:void(0)" title="Abgedeckte doppelte Gleitringdichtung" data-description-id="areaDesc-3" style="width: 6.775%;height: 18.75%;left: 25.745%;top: 21.875%;background-image: url(files/maier-energie-umwelt/layout/marker.png);" data-tag-id="3"></a>
<div id="areaDesc-3" class="description invisible" data-id="3"><p>Test3</p></div>
<a class="area center-bg hasDescription" href="javascript:void(0)" title="Optimierte Schutzschelle aus Edelstahl" data-description-id="areaDesc-2" style="width: 6.775%;height: 18.75%;left: 27.778%;top: 49.375%;background-image: url(files/maier-energie-umwelt/layout/marker-bottom.png);" data-tag-id="2"></a>
<div id="areaDesc-2" class="description invisible" data-id="2"><p>Test2</p></div>
</figcaption>
</figure>
Script
$('.description').sort(function (a, b) {
return parseInt(a.data-id) > parseInt(b.data-id);
}).each(function(){
var elem = $(this);
elem.remove();
$(elem).appendTo(".description");
});

Your code is close to be working.
You only need to use jQuery .data() to access data attribute value. Note that it returns number, not string, if data attribute stores numeric value, so you don't need to parse it yourself.
You also do not need to .remove() element. You just need to append your item to specific container - if item is already in DOM tree, then it will automatically be detached from its current place and will be moved it to a new location. Just appending items consequently in the right order gives the desired results.
$(".container > div")
.sort(function(a, b) { return $(a).data("id") - $(b).data("id"); })
.each(function() { $(this).appendTo(".container"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div data-id="1">1</div>
<div data-id="3">3</div>
<div data-id="2">2</div>
<div data-id="9">9</div>
<div data-id="5">5</div>
<div data-id="4">4</div>
<div data-id="8">8</div>
<div data-id="7">7</div>
<div data-id="6">6</div>
</div>
Update: in order to sort your divs together with related <a/> tags, you can use jQuery .prev() which simply takes the previous DOM element and then you can do the same operation with this link. However, it is a better idea to wrap a and div into single element, so that their relation is described in HTML, but not by their order.
$(".container > div")
.sort(function(a, b) { return $(a).data("id") - $(b).data("id"); })
.each(function() {
$(this).prev().appendTo(".container");
$(this).appendTo(".container");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
One
<div data-id="1">1</div>
Three
<div data-id="3">3</div>
Two
<div data-id="2">2</div>
Nine
<div data-id="9">9</div>
Five
<div data-id="5">5</div>
Four
<div data-id="4">4</div>
Eight
<div data-id="8">8</div>
Seven
<div data-id="7">7</div>
Six
<div data-id="6">6</div>
</div>

You can try:
var yourList = $(".description");
yourList.sort(function(x, y){
return $(x).data("id")-$(y).data("id")
});
$(".caption").append(yourList);
Have tested and works now, noticed a small typo. See it working here https://jsfiddle.net/trekmp/pLyw3qg4/5/

Javascript mouseover/mouseout animation working for first iteration only

I created a javascript animation to move a picture to the right when on mouseover and to go back to its resting position when the mouse exits the image. It works flawlessly for the first image but when I try the other iterations the first image moves instead of the one I hover on.
Here is the HTML code:
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt A">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt B">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
<div class="sectionJoueur">
<div class="scroller">
<figure id="infos" class="nomPositionCourt C">
<img src="images/infoMathieuD.png">
</figure>
<figure class="img">
<img src="images/md.jpg">
</figure>
</div>
</div>
I'm trying to use the classes names "class="nomPositionCourt A">" the target the specific image being hovered on but it doesn't seem to be working.
Here is the JS code:
function over(){
if ( $("#infos").hasClass("A") ){
$("#infos").stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
else if ( $("#infos").hasClass("B") ){
$("#infos").stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
}
function out(){
$("#infos").stop().animate({"margin-left": -287});
}

At first glance, it looks like the reason is that both of your images are using the same ID tag (which is bad practice).
This is the code I'm looking at:
figure id="infos"
You are using that same ID tag twice. When your code runs, it's picking up the first "infos" tag it comes to, which is your first image.
Make sure to use unique ID tags and this should help resolve your problem.

You have assigned the id attribute to more than one element which suppose to be unique id="infos" class can be assigned to multiple elements but id should be unique
Try this one by changing the id to class
$(".nomPositionCourt").hover(function(){
if ( $(this).hasClass("A") ){
$(this).stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
else if ( $(this).hasClass("B") ){
$(this).stop().animate({"margin-left": +0});
$(".img").mouseleave(out);
}
},function(){
$(this).stop().animate({"margin-left": -287});
})
In $(this) you have the object of current hovered image
Here is the Reference