I have a set of links that I'm trying to conceal inside a toggle , but my code below is not doing it . Please what have I done wrong.
Thank you.
<script>
$("#navigation li a[id]").click(function()) {
$("#" + this.id.substr(1)).slideToggle(600).siblings('.toggleDiv').slideUp(600);
});
</script>
<div id="search" class="toggleDiv" style="display:none">List</div>
<div id="sidebar">
<ul>
<li>President</li>
<li>Vice</li>
<li>Secretary</li>
</ul>
</div>
Brackets in jQuery are for attributes.
a[id] will not work because those a tags don't have an id attribute. You also don't have a #navigation div.
Try $("#sidebar ul li a")
You have missed a ).
$("#" + this.id.substr(1))
// ----^
However your selector doesn't select the anchor elements as they don't have ID attributes and this.id is undefined. It seems you want to get the id parameter of href attribute.
$("#sidebar li a").click(function()) {
$("#"+this.href.slice(-1)).slideToggle(600).siblings('.toggleDiv').slideUp(600);
});
Related
Need some help with jQuery DOM.
I need to extract the content of the id. I have a list that user can select and it will filter the hotspot of the map. After user select, I want filtertitle to display the new selected filter. I can apply the "id" to the filter title but not sure about the content because the content has Shopping / Dining. Someone please.
HTML
<div class="map-filter">
<div class="filtertitle">All Categories</div>
<ul class="filter-list">
<li class="active" id="All Categories">All Categories</li>
<li id="Shopping">Shopping/Dining</li>
<li id="Hotel">Hotels & Resorts</li>
<li id="Art">Art Galleries</li>
</ul>
</div>
jQuery
$('.filter-list li').click(function(){
var id = $(this).attr('id');
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html(id); //This part is where I set the id
});
Use .text(), it gives you the text content of the desired element.
$('.filtertitle').html($(this).text());
In case of html content use .html().
$('.filtertitle').html($(this).html());
If I'm understanding what you're asking correctly then you can try something like this.
$('.filter-list li').click(function(e){
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html($(e.currentTarget).text());
});
JSFiddle - https://jsfiddle.net/583zgs57/
Instead of simple setting id, you can use $(this).text(); to fetch the text content of current element.
$('.filter-list li').click(function(){
var id = $(this).attr('id');
$(this).siblings().removeClass('active');
$(this).addClass('active');
$('.filtertitle').html($(this).text());
});
as stated in the name, i have a menu with links, and i have a list of sections which i want to show/hide on the click of the menu.
What i want here is to be dynamic in a sense that if i add more menus and sections I don't have to change the code that does it, or to add new tags or names.
I tried doing something myself but I'm probably missing something..
Any assistance would be appriciated
I have a simple example on this jfiddle: https://jsfiddle.net/s07ysx6w/6/
HTML:
<div id="header">
<div id="menuBlock">
<ul id="menu">
<li>Novosti</li>
<li>Program Mladi</li>
<li>Program Odrasli</li>
<li>Program Upisi</li>
<li>Galerija</li>
<li>Kontakt</li>
</ul>
</div>
</div>
<body>
<div id="main">
<div id="novosti" name="sekcija1" class="sekcija">
aaaa
</div>
<div id="programMladi" name="sekcija2" class="sekcija">
aaaa
</div>
<div id="programOdrasli" name="sekcija3" class="sekcija">
aaaa
</div>
<div id="programUpisi" name="sekcija4" class="sekcija">
aaa
</div>
<div id="galerija" name="sekcija5" class="sekcija">
aaaa
</div>
<div id="kontakt" name="sekcija6" class="sekcija">
aaa
</div>
</div>
</body>
Javascript:
$(document).ready(function() {
$("#menu").click(function(e) {
var selected = this.attr('href');
$('#main' + selected).show('slow').siblings().hide('slow');
});
});
EDITED:
Copy/pasting made me careless so now there are only unique id's. Also replaced the fiddle with a working one (solution).
UPDATE:
In case anyone uses slicknav as a plugin on his/her's page, to get to the element you have in your menu you need to find how exactly slicknav injected it into your page. For instance, in my case, since i prepend it to my #menuBlock div tag. In order to find the element #novosti i had to dig in deep, since slicknav creates tags on its own in order to work the way it does.
In that case my javascript looked like this.
$(document).ready(function(){
$("#menuBlock div ul li a").click(function (e){
e.preventDefault();
var selected = $(this).attr('href');
$( selected ).fadeIn('slow').siblings().hide();
});
});
There should a space between 2 selectors if they have a parent child relationship, so change this line
$('#main' + selected).show('slow').siblings().hide('slow');
to
$('#main ' + selected).show('slow').siblings().hide('slow');
or simply the selected one (since it is already pointing to a specific element)
$(selected).show('slow').siblings().hide('slow');
check this updated fiddle
$(document).ready(function(){
$("#menu li a").click(function (e){ //bind the event on `a` rather than ul
var selected = $(this).attr('href'); //use $(this) instead of this
$( selected ).show('slow').siblings().hide('slow'); //explained above
});
});
There are more than one errors found in your code,
set a Jquery library
Id should be unique throughout the DOM
Replace this.attr with $(this).attr()
Descendant selector would be #menu #something not #menu#something
Should .stop() an animation before beginning the new one.
Try,
$(document).ready(function() {
$("#menu li a").click(function(e) {
e.preventDefault()
var selected = $(this).attr('href');
$('#main ' + selected).stop().show('slow').siblings().hide('slow');
});
});
DEMO
Try this method
$(document).ready(function() {
$("#menu a").click(function(e) {
debugger;
var selected = $(this).attr('name');
$('#main div').hide();
$('#main div[name="'+selected+'"]').show('slow');
});
});
You are not supposed to have more than one element with the same ID on a page, so change the id on the page to something more specific. Or I'm I mistaken? From your question, you wanted something more extensible, here is an approach
$(document).ready(function(){
$("#menu").click(function (e){
var element = $(e.target).attr('href');
$('#main-divs > ' + element).show('slow').siblings().hide('slow');
});
});
I have the following layout:
<ul id="header">
<li id="item1" class="off"> <a>Abc</a> </li>
<li id="item2" class="off"> <a>Abc</a> </li>
</ul>
When I click on a href as in the <a> I want the class in the <li> for that to be updated.
I've tried the following with no luck:
$(".header > li a").click(function(){
$(".header li a.current").removeClass("off");
$(this).addClass("on");
});
Any ideas?
--EDIT:
Ok i just realized I'm not looking at this correctly.
So when clicking on that link a new page loads. So using the click function is wrong because a new page loads so whatever changes to the class i have will be lost. What i therefore need is to use the $(document).ready(function() to say something like "I clicked on li with id from the previous page so now update that class"
So
Thanks!
You can use closest() to get the parent li and then add the class:
$(this).closest("li").addClass("on");
you also need to use id selector $("#header") not class selector $(".header"):
$("#header > li a").click(function(){
$("#header li a.current").removeClass("off");
$(this).closest("li").addClass("on");
});
FIDDLE DEMO
USe
$(".header > li a").click(function(){
$(".on").removeClass("on");
$(this).closest("li").addClass("on");
});
Working fiddle http://jsfiddle.net/LDC69/1/
$("#header > li a").click(function(){
$(this).parent().removeClass("off").addClass("on");
});
Its events chaining.
Look li is ID not CLASS.
Demo
Your selector is wrong $(".header") . In your html code <ul id="header"> so you have to use id selector $("#header")
$("#header li a").click(function (e) {
e.preventDefault();
$(this).parent().siblings().removeClass("on").addClass("off"); // Remove all class on and added off class
$(this).parent().removeClass("off").addClass("on"); // Select current parent element and remove off and added on class
});
fiddle
I have in index.html:
<div data-role="fieldcontain" id="Container">
<ul id="my_ul" data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Text" data-inset="true">
<li class="ui-screen-hidden">12</li>
<li class="ui-screen-hidden">123</li>
<li class="ui-screen-hidden">1234</li>
</ul>
</div>
js:
$("#my_ul li").click(function() {
$('#Container form input').val($(this).text());
//$(this).hide();
});
So, when I click on li, the text from li go to the input. If I use hide - that element dont apears, when I delete a sting in input.
I need - click on li, text from li apears in input, all dropdown li hides, but if I deleted string from input, li apears. How to do that?
Thanks.
You may try this (To hide the list items after selection)
$("#my_ul li").click(function() {
$('#Container form input').val($.trim($(this).text()));
$('#my_ul').children().addClass('ui-screen-hidden');
});
DEMO.
Hacky solution is to deal with hiding and showing the ul yourself.
Fiddle: http://fiddle.jshell.net/Qyvhc/8/
$("#my_ul li").click(function() {
$('#Container form input').val($(this).text());
$("#my_ul").hide();
});
$('#Container form input').on('focus', function () {
$("#my_ul").show();
});
I doubt it's the best solution but I can't see anything in the API docs that would achieve this.
I'm pretty new into JQuery but hope this is what you wanted.
Demo
<ul>
<li class="first">Modify search
</li>
<li>For <span>Select</span><span style="float:right; padding-right:10px;">▼</span>
<ul> <span>Girlfriend</span> <span>Boyfriend</span> <span>Husband</span> <span>Wife</span>
<span class="cl"></span> <span>Mother</span> <span>Father</span> <span>Daughter</span> <span>Son</span>
<span class="cl"></span> <span>Friend (M)</span> <span>Friend (F)</span> <span>Colleague (M)</span> <span>Colleague (F)</span>
<span class="cl"></span> <span>Nephew</span> <span>Niece</span> <span>Aunt</span> <span>Uncle</span>
<span class="cl"></span>
</ul>
</li>
</ul>
What i am trying to do is whenever i select any value it must be highlighted and it should be shown in the filter.
For example if i select girlfriend the For : select should look like For : girlfriend
Let me guess that the 'Select' text has the id 'select_id';
$('ul span').click(function(){
$("#select_id").html($(this).html);
});
$('a').click(function(){
var clicked_link = $(this).text() // will get the text
$(this).attr('some_attr') // will get the value of an attribute in the clicked a tag
alert(clicked_link);
})
add an id to span <span id="this">Select</span>
then getElementByI("this").innerHTML = set to something you want
do it like this
$(function(){
$("a").click(function() {
alert("look like for : "+$(this).text());// OR show this value in any particular DIV
$(".displayDiv").text("look like for : "+$(this).text());
});
});
You should have only li inside a ul and not spans. Others are not permitted.
However, the answer you are perhaps looking for is :
$('ul li ul span').click(function(){
$('ul li span').eq(2).text($(this).text());
}
And all this surely begs for the use of a class or id.
Add id attribute getval to span where you want to display selected item.
<span id="getval" style="float:right; padding-right:10px;">▼</span>
JQuery
Get the text of anchor and then set it to where you want to display.
$(document).ready(function(){
$("ul span a").click(function(){
$("#getval").text($(this).text());
});
});
It is easier if you can assign ID to the elements...
for example:
<a href="#">For <span id="select">Select</span>...
and also to the second ul:
<ul id="list">...
then you need something like that:
$('#list a').on('click', function() {
var text = $(this).text(); //this take the text of the clicked text.
$('#select').empty().text(text); //this assign the value.
});