Show and Hide using jquery - javascript

There are number of examples for add and remove in jquery.
But my code is bit different to examples. when i click add it show second and if i click again on add i want show third as well as when i click remove hide the third also until five. Here is my code
CSS
#second {
display: none;
}
#third {
display: none;
}
#forth {
display: none;
}
#fifth {
display: none;
}
HTML
<div id="header">
add - remove
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
<div id="forth">forth</div>
<div id="fifth">fifth</div>
</div>`
JavaScript
$(document).ready(
function() {
$("#add1").click(function() {
$("#second").show();
});
$("#remove").click(function() {
$("#second").hide();
});
});
HERE IS CODE
JSfiddle

Here is an approach you can use. First, add a class to all elements that you want to show / hide. In this case I used class toggle:
<div id="header">
add - remove
<div id="first" class="toggle">first</div>
<div id="second" class="toggle">second</div>
<div id="third" class="toggle">third</div>
<div id="forth" class="toggle">forth</div>
<div id="fifth" class="toggle">fifth</div>
</div>
Then when you are adding an element, use function first to find first not visible element with class toggle and show it. When you want to remove element, use function last to find last not visible element and hide it:
$(document).ready(function() {
// when add is clicked, show first not visible element with class 'toggle'
$("#add1").click(function() {
$('.toggle:not(:visible)').first().show();
});
// when remove is clicked, hide last visible element with class 'toggle'
$("#remove").click(function() {
$('.toggle:visible').last().hide();
});
});
Here is updated JSFiddle

Related

Jquery call function on hover if element is of class A but not class B

I want to call a function when hovering over elements with a specific class attribute, but not another. I feel like the :not selector should work, but it is still firing for all elements of class A.
I have elements with a specific class .sidebar-section, but one of them has another class attribute .show, I want to call a function on hover for class sidebar-section excluding elements that are also of the class show.
<div class="sidebar-section show" id="one">
<div class="sidebar-title">Ones</div>
</div>
<div class="sidebar-section" id="two">
<div class="sidebar-title">Twos</div>
</div>
I want to set up a hover listener for sidebar-section that will fire when hovering over Twos but not over Ones. I have tried $(".sidebar-section:not(.show)").hover() but for some reason this is not working, since it still fires for all sidebar-sections.
$(".sidebar-section:not(.show)").hover(
function () {
toggleSection(this.id);
},
function () {
toggleSection(this.id);
}
);
Thanks to #CBroe's suggestion I've edited the code by moving the check for the show class into hover handler. This accomplished the main part of my question since the shown element no longer collapses when hovered over. But this collapses the element when I leave.
To fix this I added a mouseleave event handler with a function to toggle #one once the mouse is no longer on the sidebar, but the function is never called. Why is the mouseleave of the sidebar-container not executing?
//Contents are hidden unless section is selected
$(function () {
$(".sidebar-contents").hide();
toggleSection("one");
});
$(".sidebar-section").hover(
function () {
if(!$(this).hasClass("show")){
toggleSection(this.id);
}
},
function () {
toggleSection(this.id);
}
);
$("#sidebar-container").mouseleave(
function () {
toggleSection("one");
}
);
//toggles collapsed/expanded view of sidebar sections
function toggleSection(name) {
$("#" + name).children('.sidebar-contents').toggle();
$("#" + name).children('.sidebar-title').toggle();
$("#" + name).toggleClass('show');
}
#sidebar-container {
display: flex;
height: 100%;
}
.sidebar-section {
background-color: blue;
writing-mode: vertical-lr;
}
.sidebar-section.show {
background-color: yellow;
writing-mode: horizontal-tb;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sidebar-container">
<div class="sidebar-section" id="one">
<div class="sidebar-title">Ones</div>
<ul class="sidebar-contents">
<li>Item 1</li>
</ul>
</div>
<div class="sidebar-section" id="two">
<div class="sidebar-title">Twos</div>
<ul class="sidebar-contents">
<li>Item 2</li>
</ul>
</div>
</div>
The problem is with your toggleSection function. When you hover over an item, you are toggling the show class. That is why, your selector doesn't work. Can you update your hover function with this:
$(".sidebar-section").hover(
function () {
$(this).children('.sidebar-contents').show();
$(this).children('.sidebar-title').hide();
$(this).addClass('show');
},
function () {
$(this).children('.sidebar-contents').hide();
$(this).children('.sidebar-title').show();
$(this).removeClass('show');
}
);

Make content of header disappear when menu opens

I basically want to make that when I press on a button the first time it adds display: none; to an element and when I press it again it makes the element appear again (so add display: none;). How would I do this with jQuery?
This is the jQuery I tried to implement but as I'm new to Javascript I don't know why it isn't working.
$('#menuBtn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.header-text').css({
'display': 'none'
});
} else {
$('.header-text').css({
'display': 'block'
});
}
$(this).data("clicks", !clicks);
});
Use toggle or slideToggle (With animation)
$('#menuBtn').on('click', function() {
$('.header-text').toggle();
});
$('#menuBtnSlide').on('click', function() {
$('.header-text').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn">Toggle</button>
<button id="menuBtnSlide">SlideToggle</button>
<div class="header-text">
This content must me show and hide
</div>
You could supply a modifier class in some external stylesheet for hiding the text and toggle it via toggleClass.
Word of advice: It's best not to use something like toggle because it will inject inline css into your elements, making it difficult to override in the long-run for something so simplistic.
const $headerText = $('.header-text');
$('#menuBtn').click(function() {
$headerText.toggleClass('header-text--hidden');
});
.header-text--hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="menuBtn" type="button">Toggle</button>
<header>
<p class="header-text">Text 1</p>
<p class="header-text">Text 2</p>
<p class="header-text">Text 3</p>
<p class="header-text">Text 4</p>
</header>
You actually don't need jQuery for this.
You can add CSS rule to set .hidden to display: none and then toggle that class when the button is clicked.
To catch the click event on the button, you need a click event listener
const header = document.querySelector('.header');
const toggle = document.querySelector('.menu-toggle');
toggle.addEventListener('click', () => {
header.classList.toggle('hidden')
});
.header {
background: red;
height: 3em;
}
.hidden {
display: none;
}
<header class="header"></header>
<button class="menu-toggle">Click me!</button>
.hidden{display:none !important;}
$('#menuBtn').click(function() {
$('.header-text').toggleClass("hidden");
});

How to use JQuery to detect Mouseover and add animation on dynamic item

I have a series of div's that get loaded dynamically. There ID is set when the page loads, and they all have the same class of "pp-post". When the user hovers over an item with class="pp-post" the 'p' items within that become visible.
I want to add a different animation for each of these 'p' tags when they become visible.
I have minimal experience with JQuery so I am wondering how I can detect which "pp-post" item is hovered and apply the animations to the 'p' tags.
As for the animations not sure yet what to use but it could be JQuery animations or maybe use animations.css and add a class to the p tags when visible.
HTML:
<div id="{post_id}" class="pp-post">
<div id="{post_id}" class="pp-post-item">
<p id="{post_id}" class="pp-post-title"></p>
<p id="{post_id}" class="pp-arrow-down"></p>
</div>
</div>
CSS:
.pp-post-title {
visibility: hidden;
}
.pp-arrow-down {
visibility: hidden;
}
.pp-post-item:hover > p {
visibility: visible;
}
how I can detect which "pp-post" item is hovered and apply the animations to the 'p' tags
You can use $(this) to get the hovered pp-post.
The code will look like
$('.pp-post').hover(function(){
$(this).animate({
//animation code
});
});
To make p tag visible,
$('pp-post').hover(function(){
$(this).find('p').animate({
//animation code
});
});
Instead of animation function, you can also use certain specific functions like fadeIn
Sample snippet
$(document).ready(function() {
$('.pp-post').hover(function() {
$(this).find('p').fadeIn(2000);
});
});
.pp-post p {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>
<div class="pp-post">Hover
<p>Sample1</p>
</div>

jQuery slideDown not functioning correctly

I wish to animate a div to make it appear and slide down with jQuery.
I have got my script to work where you hover over an image and another div slides in, should the user leave the mouse hover, the div will slide up and disappear.
Problem:
The first time i hover over the image, nothing happens. I have to leave my mouse and hover over it a second time for the effect to start working, I dont get why this is???
jQuery:
function show_action(){
$(function(){
$(".action").hide();
$(".logo").hover(
function(){ $(".action").slideDown(); },
function(){ $(".action").slideUp(); }
);
});
}
CSS:
#action_text{
display:none;
}
HTML:
<div class="center_container">
<div class="action" id="action_text"><span>Click To Upload</span></div>
<img src="images/logo.png" class="logo" onmouseover="show_action();">
</div>
No need to call .hide() on the .action element. Just give it display: none in your css, so that it will not show when the page loads. That way, you don't need the .stop() to clear the animation queue, and it also prevents a 'flicker' effect where your .action element will show up when the page loads for a brief moment until .hide() gets called.
$(document).ready(function() {
$('.logo').hover(
function() {
$(".action").slideDown();
},
function() {
$(".action").slideUp();
}
);
});
.action {
width: 100%;
background-color: red;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<span class="logo">LOGO</span>
</div>
<div class="action">
<span>Action</span>
</div>
I think you are calling function show_action as onhover="show_action() remove that and move the rest code outside function wrapping, otherwise the hover() event handler will only bind after the first hover. additionally use stop() to clear the animation queue
$(function() {
$(".action").hide();
$(".logo").hover(
function() {
$(".action").stop().slideDown();
},
function() {
$(".action").stop().slideUp();
}
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class=logo>Hover here</div>
<div class=action>content<br>here</div>
Update : You can remove $(".action").hide(); by adding following css
.action {
display: none;
}

How do I show all of inner DIVs using nested JQuery selector?

This my code, the first selector is for when i click on a div that has an id of # and the inner selector is an inner div that has the id of "popup-#" my question is how do I show just the current inner div because currently when I click, all of the inner divs on the page are showing and hiding. Side note these divs are generated through php and so they have values starting at 1 and increasing. Also another questions, what is a better way to write the inner div selector to show instead of using .filter for show and hide ? I couldn't find a way to use "this" for the inner selector.
ex. When I click on one of my outer divs that has an ID of "1" the inner div of "popup-1" should show and not all the others.
$('div').filter(function(){
return this.id.match(/^\d+$/);
}).click(function() {
if($('div').filter(function () {
return this.id.match(/popup-\d+$/);
}).css('display') == 'none'
) {
$('div').filter(function () {
return this.id.match(/popup-\d+$/);
}).show();
} else {
$('div').filter(function () {
return this.id.match(/popup-\d+$/);
}).hide();
};
});
HTML
<div class="test-style" id="1">
<div class="inner-test" id="popup-1" style="display: none">
</div>
</div>
<div class="test-style" id="2">
<div class="inner-test" id="popup-2" style="display: none">
</div>
</div>
Use the class instead of filtering on the ID. Then you need to get the ID of the element you clicked on, and concatenate that with the popup- prefix to get the ID of the element you want to show.
$(".test-style").click(function() {
var id = this.id;
$(".inner-test").hide();
$("#popup-" + id).show();
});
.test-style {
height: 100px;
width: 100px;
background-color: red;
border: solid 1px black;
}
.inner-test {
height: 50px;
width: 50px;
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test-style" id="1">
<div class="inner-test" id="popup-1" style="display: none">
</div>
</div>
<div class="test-style" id="2">
<div class="inner-test" id="popup-2" style="display: none">
</div>
</div>
But since the DIV you want to show is always inside the DIV you click on, you don't even need the IDs. Just do:
$(".test-style").click(function() {
$(".inner-test").hide();
$(this).find(".inner-test").show();
});
Your filter
this.id.match(/popup-\d+$/)
matches all inner elements in the document, because of the general 'div' selector.
Instead of
if($('div').filter(function () {
try
if($(this).filter(function () {
to filter on children of clicked element only.

Categories