Showing clicked li and hiding original - javascript

I have a drop down list consisting several item.
Now hat i want is when we click And a drop down appears. Now when we click on any option in dropdown, the original should get replaced by clicked.
For eg : Original is And, now in drop down if we click Not And, then And should get replaced by Not And and so on.
Can someone please me out with it.
Thanks

Try
$('.click-nav .js ul li').click(function (e) {
$(this).parent().prev().html($(this).html())
})
Demo: Fiddle

You can use .html() to get and set the html content of an element:
$('.clicker li').click(function (e) {
$('.clicker .hello').html($(this).html())
});
Fiddle Demo

Related

jQuery onclick show first parent div

I have an issue with a show of a parent div at onclick.
As here:
$('#click').click(function() {
$(this).parent().closest('div').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/
I need to show the .show div at the li click, and i need to hide the first when i click another.
Someone know's a method?
Thanks so much
Id's should be unique on the page.
$('.click').click(function() {
$('.show').hide();
$(this).find('.show').slideToggle("fast");
});
http://jsfiddle.net/bk1hLoyb/11/
First Id's must be unique so change it for:
<li class="click">
Bye
<div class="show">Hey</div>
</li>
and the code change it for:
$('.click').click(function() {
$(this).find('div').slideToggle("fast");
});
LIVE DEMO
Some suggestions:
remove all duplicate IDs
if you must use a selector on the li elements, use a class
.show is a child of the li that's clicked, so there's no need to use .parent() or .closest().
Code:
$('.click').click(function() {
$('.show', this).slideToggle("fast");
});
DEMO
BONUS
$(elm).find('.selector') is equivalent to $('.selector', elm)
Also written as jQuery( selector [, context ] )
When context is not specified, it is assumed to be document
Thus $(elm) is equivalent to $(elm, document)
On your "li"s change the id to a class so you can reference multiple divs.
Then on the script looks like this:
$('.click a').click(function() {
var item = $(this);
$(this).parent().siblings().find('.show').slideUp(400,function(){
item.parent().find('.show').slideDown(400);
});
});
See it working on your fiddle (sorry for updating without forking)

Show/Hide a div on click

i'm writing a small script to show/hide a div when other div is clicked, but I can't get the second div clickable.
Here's my code so far:
$(document).ready(function(){
$('div#ordontia').click(function(){
$(this).next('div#ordontia2').slideToggle("slow");
});
});
http://jsfiddle.net/65AK2/1/
Every time a "button" is clicked a new div with a description should appear on the bottom of the table. (the blue div on the bottom). If another button is clicked then the previous description should close and another one should open in the same place. (not implement yet)
Thanks in advance for any help!
Why do you want to select your element with next if it has an unique ID?
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
more general if you add more divs:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
with all others closing:
$(document).ready(function(){
$('.botaomedicina').click(function(){
$('.botaomedicinadescription').slideUp("slow");
$('#'+$(this).attr('id')+'2').slideToggle("slow");
});
});
Don't use $.next, it only selects siblings of the current element:
Get the immediately following sibling of each element in the set of
matched elements. If a selector is provided, it retrieves the next
sibling only if it matches that selector.
— jQuery documentation: .next()
Use the normal one:
$('div#ordontia2').slideToggle("slow");
Fixed it.
http://jsfiddle.net/65AK2/2/
firstly, it lookx like your toggled div was mal-formed. I didnt see a for it.
Secondly, if you know what the ID of the other div is, you dont need to say:
$(this).next("#item");
, it would make no sense.
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
remove this ;)
try this
$(document).ready(function(){
$('div#ordontia').click(function(){
$('div#ordontia2').slideToggle("slow");
});
});
updated fiddle http://jsfiddle.net/65AK2/4/
You can do it directly by an ID selector
http://jsfiddle.net/65AK2/3/
$(document).ready(function(){
$('#ordontia').click(function(){
$('#ordontia2').slideToggle("slow");
});
});

How to target elements under clicked with jQuery

I want to hide everything under (but leave the ones above) the element that was clicked by the user. Check out this demo: http://jsfiddle.net/dS2vA/
So if you click on the 2nd <li> the three <li>s under it should be hidden. If you click the 4th <li>, only the 5th element should be hidden.
I tried doing it with :not('clicked') but that targets the elements above the clicked element, as well.
Any ideas?
Just use the following:
$(this).nextAll().hide();
DEMO: http://jsfiddle.net/dS2vA/1/
Try something like this:
$('ul li').click(function() {
$('ul li').each(function() {
$(this).removeClass();
})
$(this).nextAll("li").slice(0,3).addClass('clicked');
})
in addition to VisioN's answer, to be more specific you can add a selector filter ("li") to nextAll() like this:
$(this).nextAll("li").hide();

How to click and pick div elements in jQuery

Ok so I want to make so in the profile list, you can click on the profile and it will be highlighted (another background color, lets say yellow). And when you have highlighted this and press "save", somehow i wish to pick the highlighted profiles id and output them.
So my first question:
http://jsfiddle.net/5pZ2v/3/
How can i do something like so you can pick/unpick by clicking/unclicking? And they will be highlighted. And how can i make a selector that grabs these highlighted profile boxes?
Maybe there already exists a function for this or plugin?
Else how can i do this clicking/unclicking to highlight/unhighlight and then output the highlighted element's id attribute in an alert, that appears when you click on a "Show what you choose" button
Use something like this:
$('div.profile').click(function(){
$(this).toggleClass('selected');
});
Then use div.profile.selected to style the selected profiles in your css. Then when you want to select all the divs that are highlighted just use $('div.profile.selected'). If you want to know how many are selected just use $('div.profile.selected').length. Here's an example:
http://jsfiddle.net/Paulpro/apvqM/
Did you try .toggleClass()?
i.e. create a css class highlight and add
$("div").click(function () {
$(this).toggleClass("highlight");
});
HTH
Ivo Stoykov
PS: Look documentation here
You can use the click function of jQuery to mark/unmark a div.
$("div.profile").click(function () {
// if it's unmarked we mark
if(!$(this).hasClass('selected'))
$(this).addClass('selected');
else
$(this).removeClass('selected');
}
You can then use each to get all the marked div :
$("div.selected").each(function () {
// do what you want
});
For the boxes not appearing black, it comes from a missing semicolon after the height attribute ;)
http://jsfiddle.net/vol7ron/5pZ2v/8/
First you need to give your DIVs an ID then look at my Fiddle.
$("div").click(function () {
$(this).toggleClass("highlight");
});
$('#save-button').click(function(){
$('#output').html(''); // clear the output div
// Loop through each selected div and output it's ID
$('div.highlight').each(function(){
$('#output').append('<div>' + $(this).attr('id') + '</div>')
});
});

find which li was clicked

suppose i have 3 li. what i want to do is when i click any li then i want to know which li was clicked and add an event according to it. how do i do it with jquery, any help or suggestions please
In jQuery, within an event handler the this keyword refers to the element which triggered the event.
$('li').click(function() {
alert($(this).text()); // read out the text of the list item that was clicked
}
jQuery will automatically capture the clicked element that you specify in the wrapped set:
$('ul li').click(function(){
alert('I was clicked, my text is: ' + $(this).text());
});
See the example here.
You need to provide your html markup for exact what you need.
More Readings:
jQuery's this: demystified

Categories