Element targeting in jquery - javascript

I have an element that I am using as an expander. When I click on it uses the toggle function to show/hide the expander-container element.
<script type="text/javascript">
$(document).ready(function () {
$(".expand-icon").click(function () {
$(".expander-container").toggle(500);
});
});
<img class="expand-icon" src="./Content/Icons/toggle-expand-icon.png" alt="some_text" />
<div class="expander-container" >
...
</div>
How can I target only the next occurence of the expander-container element without targeting all of them on the page?

I think you should go for go for
$(".expand-icon").click(function () {
$(this).next('.expander-container').toggle(500);
});

Use .next()
$(document).ready(function () {
$(".expand-icon").click(function () {
$(this).next(".expander-container").toggle(500);
});
});
Here is the working demo : http://jsfiddle.net/XLNM5/

Related

Slidetoggle 2 adjacent divs

<div class="unique1">Blabla1</div>
<div class="amministrazione">Amministrazione</div>
some link
some link
<div class="didattica">Didattica</div>
some link
<div class="unique2">Blabla2</div>
<div class="amministrazione">Amministrazione</div>
some link
<div class="didattica">Didattica</div>
some link
some link
<div class="unique3">Blabla3</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
<div class="unique4">Blabla4</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
some link
I'd like to have .amministrazione, .didattica and all the links on display:none by default. When user clicks on .unique1 or .unique2 or .unique3 or .unique4 (only) the next .amministrazione AND .didattica slidetoggle down.
Here's what I have so far.. but it's not toggling the correct elements:
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
var index = $(this).index(),
newTarget = jQuery('.amministrazione, .didattica').eq(index).slideDown();
jQuery('.amministrazione, .didattica').not(newTarget).slideUp();
});
});
http://jsfiddle.net/2rgqpzpt/
Use nextAll with the :first selector to target the appropriate divs:
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
jQuery('.amministrazione, .didattica').slideUp();
jQuery(this).nextAll('.amministrazione:first, .didattica:first').stop().slideDown();
});
});
Fiddle 1
You could accomplish the same thing using nextUntil:
jQuery(function () {
var un= jQuery('.unique1, .unique2, .unique3, .unique4');
un.click(function () {
jQuery('.amministrazione, .didattica, a').slideUp();
jQuery(this).nextUntil(un).stop().slideDown();
});
});
Fiddle 2
You can change your code with
jQuery(function () {
jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
var index = $(this).index(),
newTarget = $(this).next('.amministrazione');
newTarget= newTarget.add(newTarget.next());
newTarget.slideDown()
jQuery('.amministrazione, .didattica').not(newTarget).slideUp();
});
});

Jquery Delay overrule on next link or div hovered

I wrote a code where a div appears if someone hovers other div, I added the 5 seconds delay so the shown div stays but the problem is that I want it to stay until next link hovered. Means I need the first div to be disappeared if the second link hovered.
Here's JS Fiddle link of my existing code:
http://jsfiddle.net/np87e/880/
$( document ).ready(function() {
$("#theLink3").hover(
function () {
$("#theDiv3").slideDown();
},
function () {
$("#theDiv3").delay(5000).slideUp();
}
);
$("#theLink4").hover(
function () {
$("#theDiv4").slideDown();
},
function () {
$("#theDiv4").delay(5000).slideUp();
}
);
});
You need to call slideUp() of the div in next elements mouseenter callback
$("#theLink3").hover(function () {
$("#theDiv4").stop(true, true).slideUp();
$("#theDiv3").slideDown();
}, function () {
$("#theDiv3").delay(5000).slideUp();
});
Demo: Fiddle
Note: I'm not a fan of writing individual hover handlers like you have done. So
hover here
<div id="theDiv3" class="target">this is the div</div>
<hr />
hover here
<div id="theDiv4" class="target">this is the div</div>
<hr />
then
jQuery(function ($) {
var $targets = $('.target');
$(".trigger").hover(function () {
var $target = $(this).next('.target').stop(true, true).slideDown();
$targets.not($target).stop(true, true).slideUp();
}, function () {
$(this).next('.target').stop(true, true).delay(5000).slideUp();
});
});
Demo: Fiddle

jQuery hide and show text input

I want to do a simple function in Jquery: when a button is clicked show the input text, when it's clicked again- hide the input text.
<div>
<div id="btnNewGroup">New Group</div>
<input type="text" id="newGroup" style="display:none" />
</div>
and this is the scrupt section:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").hide()) {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
when I click the button the text input is showing, when I click it again I want the input text to be hidden, but nothing happens.
You can use toggle() to show / hide
Live Demo
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
The problem with the condition you have is that you are hiding the element instead of checking if it is hidden. You can is with :hidden like is(':hidden') to check if element is hidden.
if ($("#newGroup").is(':hidden')) {
$("#newGroup").show();
else
$("#newGroup").hide();
if ($("#newGroup").hide())
The hide function does not return a boolean value so you can't use it in an if statement. It returns a jQuery object which is always true so your second block never gets hit.
You can try two things:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Or a simple toggle:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
});
Additionally, when working with selectors multiple times it's a good idea to cache the element - otherwise jQuery tries to find the element each time you try:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
var $newGroup = $("#newGroup"); // Cache it here
if ($newGroup.is(":visible")) {
$newGroup.hide();
}
else {
$newGroup.show()
}
});
});
use .toggle() for hide and show alternatively in jquery
$("#btnNewGroup").click(function () {
$("#newGroup").toggle();
});
Demo
Use .toggle() function
$("#btnNewGroup").click(function () {
$("#newGroup").toggle()
});
Or use :visible pseudo selector with is()
Demo
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").is(":visible")) {
$("#newGroup").hide();
}
else {
$("#newGroup").show()
}
});
});
Note :hide() function does not return boolean value. Use is(:visible) or is(:hidden)
You need to change
if ($("#newGroup").hide()) {
to (just one possible solution)
if ($("#newGroup").css('display')=='none') {
Because $("#newGroup").hide() will always return true.
And here are the full code:
$(document).ready(function () {
$("#btnNewGroup").click(function () {
if ($("#newGroup").css('display')=='none') {
$("#newGroup").show();
}
else {
$("#newGroup").hide()
}
});
});
Have a look at the .toggle() function within the API.
http://api.jquery.com/toggle/
document.getElementById("username").style.display='block';

Replace only text inside div and toggle different div content using jquery

show below jquery code
$(document).ready(function () {
$('#prvnote').hide();
$('#regclass').click(function () {
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
});
});
show below HTML code
This div only use as menu
<div id="regclass"><span>View Previous Note</span></div>
Now when i clicked on above div content then below div will display and above span tag content replace with "Post Note"
<div id="newdiv"><form>......</form></div>
<div id="prvnote"><form>......</form></div>
When div(newdiv) show then span content "Post Note" and when div(prvnote) show then span content must be "View Previous Note"
Try this
$(document).ready(function () {
$('#prvnote,#newdiv').hide();
$("#regclass").toggle(function () {
$('#regclass span').text('Post Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
}, function () {
$('#regclass span').text('View Previous Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
});
});
DEMO
HTML
<div id="newdiv" style="display:none"><form>......</form></div>
<div id="prvnote"style="display:none"><form>......</form></div>
<div id="regclass"><span>View Previous Note</span></div>
Jquery
$('#regclass').click(function () {
alert("Hi");
$("#regclass span").html("").append("POST NOW");
$('#prvnote').css({"display":"block"});
$('#newdiv').css({"display":"block"});
});
Check The Fiddler Here
http://jsfiddle.net/ShekharPankaj/3htMG/
Try this:
$(document).ready(function () {
$('#prvnote').hide();
$("#regclass").toggle(function () {
$('#regclass span').text('Post Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
}, function () {
$('#regclass span').text('View Previous Note');
$('#prvnote').toggle(400);
$('#newdiv').toggle(400);
});
});
Taken from Sridhar R, i understand you want to show only one div at a time...

impress.js - Next and Previous buttons

I've looked at the other questions on this topic, and know that I have to do something like this:
I've created buttons:
<button id="next"></button>
<button id="prev"></button>
And then at the bottom of the page, I have this (this was taken from the other question here):
<script src="js/impress.js"></script>
<script>impress().init();</script>
<script>
$("#next").click(function () {
api.next();
});
$("#prev").click(function () {
api.prev();
});
</script>
But it isn't working at all; can someone give me a hand with this?
it works, if next-prev are in inside impress div
$('#next').on('click', function(e){
impress().next();
e.stopPropagation();
});
$('#prev').on('click', function(e){
impress().prev();
e.stopPropagation();
});
Replace your script this way:
<script>
$("#next").click(function () {
impress().next();
});
$("#prev").click(function () {
impress().prev();
});
</script>
Have you included jQuery? If not, add this too:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Categories