Hello everyone! I am completely new to JavaScript. I have added a tab slider to my HTML with 3 categories in the tab menu: All, Creative, and Branding. How can I show a div after clicking on one of the list items? I have assigned classes to the list items and created two divs for the images, but what is the next step? Below is the code snippet.
$(document).ready(function(){
$("ul li").click(function(e) {
// make sure we cannot click the slider
if ($(this).hasClass('slider')) {
return;
}
/* Add the slider movement */
// identify which tab was clicked
var whatTab = $(this).index();
// Calculate how far the slider needs to move
var howFar = 160 * whatTab;
$(".slider").css({
left: howFar + "px"
});
/* Add the ripple effect */
// Remove old ripples
$(".ripple").remove();
// Setup
var posX = $(this).offset().left,
posY = $(this).offset().top,
buttonWidth = $(this).width(),
buttonHeight = $(this).height();
// Add the element
$(this).prepend("<span class='ripple'></span>");
// Make it round!
if (buttonWidth >= buttonHeight) {
buttonHeight = buttonWidth;
} else {
buttonWidth = buttonHeight;
}
// Get the center of the element
var x = e.pageX - posX - buttonWidth / 2;
var y = e.pageY - posY - buttonHeight / 2;
// Apply CSS styles and start the animation
$(".ripple").css({
width: buttonWidth,
height: buttonHeight,
top: y + 'px',
left: x + 'px'
}).addClass("rippleEffect");
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container3">
<h1>OUR PORTFOLIO</h1>
<p>Lorem ipsum lore exciting
ipsum lore portfolio</p>
<div class="portfolio">
<ul>
<li class="all">All</li>
<li class="creative">Creative</li>
<li class="branding">Branding</li>
<li class="slider"></li>
</ul>
<div class="photo" id="photo" style="display:none">
<img src="img/icon2.png"/>
</div>
<div class="photo2" id="photo2"style="display:none">
<img src="img/icon3.png"/>
</div>
</div>