Develop Reference

how to stop scroll to specific Div but allow image to slide

i am using #id on 3 buttons to change image on Slides , but i dont want to scroll to images slide section when i click on button just want to slide image to next without scrolling to image section
here is drive video link to show how my web is looking right now https://drive.google.com/file/d/1dXMCeBNzkn2c5ChNQfOAVthNBHHsePSp/view?usp=drivesdk
<div className="carousel carousel-center max-w-md md:max-w-screen-2xl mx-auto space-x-24 ">
<div id="item1" className="carousel-item">
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image1" />
</div>
<div id="item2" className="carousel-item " >
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image2" />
</div>
<div id="item3" className="carousel-item">
<img src="/BingWallpaper.jpg" width={896} className="rounded-box" alt="image3" />
</div>
</div>

Just add an event listener to your buttons and prevent the default behaviour. Add an id of "link" to the button and then add an event listener like below. If your button element contains an anchor tag, add the "link" id to anchor tag instead of button.
document.getElementById("link").addEventListener("click", (e) => {
e.preventDefault();
});

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>

animate src image change with vanilla js

I'm building a simple html/css/vanilla js component to display images. I have the list of images on the top, and when I click on one of them, it must appear in the main container.
To do that I just change the img element src like this:
document.addEventListener('DOMContentLoaded', (event) => {
var mainImg = document.getElementById("mainImg");
var thumbnailContainer = document.getElementById("thumbnailContainer");
thumbnailContainer.addEventListener("click", (event) => {
var linkClicked = event.target.currentSrc;
mainImg.src = linkClicked;
});
});
Now I would like to add some animation, but I have some trouble with css transition, here's my html:
<div class="container">
<img id="mainImg" src="xxxxx" alt="car 2"/>
<div id="thumbnailContainer" class="thumbnailContainer">
<div class="thumbnail">
<img src="xxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
<div class="thumbnail">
<img src="xxxxxx" alt="car 2"/>
</div>
</div>
</div>
The thing that is bugging me is that the element that I click to trigger the transition doesn't need to change, but I just change the src property on the main image with JS.
How can I solve this?

Using JS Toggle to Show/Hide

I am sort of new to JS, and I'm having trouble getting my code to work exactly how I want it to.
(See JSFiddle https://jsfiddle.net/ey02227z/3/)
I have 3 images, and would like to be able to click on an image and have it show a hidden div, and then when the next image is clicked, I want it to hide the first div and show the next one.
(Click Image 1 to see HiddenContent1, Click Image2, it hides HiddenContent1 and shows HiddenContent2, etc.)
Here is My Code:
(I didn't include any JS because honestly, I don't know where to start.)
Thank you in advance!
#ImgContainer{
text-align:center;
}
.Hidden{
display:none;
}
.image:hover{
border: 1px solid purple;
}
#HiddenContentContainer{
text-align: center;
min-height:50px;
min-width:100%;
border: 1px solid teal;
}
<div id="MainContainer">
<div id="ImgContainer">
<img id="image1" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image2" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image3" class="image" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" />
</div>
<div id="HiddenContentContainer">
<h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3>
<div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div>
<div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div>
<div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div>
</div>
</div>

This may solve your problem.
Try It
HTML
<div id="MainContainer">
<div id="ImgContainer">
<img id="image1" class="image" data-target="#Hidden1" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+1';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image2" class="image" data-target="#Hidden2" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+2';" onmouseout="this.src='http://placehold.it/150';" />
<img id="image3" class="image" data-target="#Hidden3" src="http://placehold.it/150" onmouseover="this.src='http://placehold.it/150?text=Image+3';" onmouseout="this.src='http://placehold.it/150';" />
</div>
<div id="HiddenContentContainer">
<h3>HIDDEN CONTENT SHOULD APPEAR HERE</h3>
<div id="Hidden1" class="Hidden">This is My Hidden Content for Image 1</div>
<div id="Hidden2" class="Hidden">This is My Hidden Content for Image 2</div>
<div id="Hidden3" class="Hidden">This is My Hidden Content for Image 3</div>
</div>
JS:
//Normal hide-show
$(".image").click(function(){
$(".Hidden").hide();
$($(this).attr("data-target")).show();
});
//For Toggle same code
$(".image").click(function(){
$(".Hidden").hide();
if(!$($(this).attr("data-target")).hasClass("current")){
$($(this).attr("data-target")).show().addClass("current");
}
else{
$($(this).attr("data-target")).removeClass("current");
}
});

Here's a starting point:
// listen to clicks from any of the links
$( '#ImgContainer a' ).on( 'click', function( e ) {
e.preventDefault(); // not necessary in this case but good practice
var link = $( this ); // the link that was clicked
var index = link.index(); // its index position
$( '#HiddenContentContainer div' ).addClass( 'Hidden' ); // reset all to hidden
$( '#Hidden' + ( index + 1 ) ).removeClass( 'Hidden' ); // remove the hidden associated with this clicked link
});
Included comments to help you better understand what each line does.

slideToggle different effect over different DIVs

When i click over the first DIV, the slideToggle effect is done correctly.
When i click over the 2nd one, it seems like it doesn't apply the effect and the content just appear suddenly.
The same occurs with the 3rd element and with any other one but the first.
What's going on?
(demo working here: http://jsfiddle.net/SW5sc/6/ )
I have this HTML structure:
<div class="subcategory">Option 1 </div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
<div class="subcategory">Option 2</div>
<div class="subcategoryContent">
<div class="subcategoryOption">
<div class="image">
<img src="vista/imgs/grupales.gif" alt="Clases grupales" />
</div>
<div class="text">
TEXT
</div>
</div>
</div>
And this jQuery code:
$(".subcategory").click(function () {
$(this).next(".subcategoryContent").slideToggle(450).siblings(".subcategoryContent").slideUp(450);
return false;
});

Remove all the "float"-properties from the CSS, and it'll work just fine! :-) The floats ruin the animations..