I'm dynamically getting hyperlinks and paragraphs from the database, and I wish to hide/show the paragraphs. How can I use jquery to show/hide only a hidden paragraph of a particular link, instead of showing all the paragraphs?
<body>
first link
<p>Show this when I click first link</p>
second link
<p>Show this when I click second link</p>
<script>
$( "p" ).hide();
$( "a" ).click(function( event ) {
event.preventDefault();
$( "p" ).show();
});
</script>
</body>
Change:
$( "a" ).click(function( event ) {
event.preventDefault();
$( "p" ).show();
});
to:
$( "a" ).click(function( event ) {
event.preventDefault();
$(this).next().show();
});
jsFiddle example
Note, you could also toggle between show/hide by using .toggle() instead of .show() if you like.
The most easy way is to give each paragraph a unique id and store that in the link as well. Like this (fiddle here)
html
first link
<p id="p-1">Show this when I click first link</p>
second link
<p id="p-2">Show this when I click second link</p>
javascript
$('a').on('click', function(e) {
e.preventDefault();
$('#'+$(this).attr('rel')).slideToggle();
});
Other options may be, for example, to find the first child of a certain type (eg a p, or a p with a specific class). Whatever way finding the element you want suits you. What is most appropriate for you mostly depends on how your page is structured.
Related
I want to get selected tabs id only if I click on the tabs not click inside the tabs. How do it using jquery version 1.9.1? fiddle:http://jsfiddle.net/tbEq6/240/
Js:
$(function() {
$( "#tabs" ).tabs();
$("#tabs").click(function(e){
alert($("#tabs .ui-tabs-panel:visible").attr("id"));
});
});
You need to change the element your click handler is attached to to the header of your tab .ui-tabs-anchor :
$(".ui-tabs-anchor").click(function(e){
alert($("#tabs .ui-tabs-panel:visible").attr("id"));
});
This is what should happen: When I click an image '.post-text' should appear, then - when I click the image once more - the image disappears. All this happens in the toggle function but I have simplified it here.
This is what actually happens: When I click one image, the '.post-text' of all the blocks are opened immediately. I need that to only open the one that I click. I have tried what you see below and the find function, but it doesn't work. Please help me.
$( ".down-text img" ).click(function() {
$(".post-text" ).toggle( "slow" );
});
You can use classes
but with that you will be needing some traversing
supposing your .post-text is the next div after your image
$( ".down-text img" ).click(function() {
$(this).next(".post-text" ).toggle( "slow" );
});
see jquery next() | find() | parent()
https://api.jquery.com/next/
https://api.jquery.com/parent/
https://api.jquery.com/find/
You should use $(this) to target the element you just clicked:
$( ".down-text img" ).click(function() {
$(this).find(".post-text" ).toggle( "slow" );
});
Data attributes can help here.
If you add a data attribute called text to your HTML image element:
<img data-text="text1"/>
And a matching one to your text element:
<div class="post-text" data-text="text1">Here is some text</div>
You can then use that information to only open the correct text element rather than all of the elements that share the same class:
$('.down-text img').click(function () {
var id = $(this).data('text');
$('.post-text[data-text="' + id + '"]').toggle("slow");
});
DEMO
So I have the code for the the div. All I need is for the div to fade out and then have the parent child removed after fade.
JSFiddle Link
HTML
<div onclick="fadeOut(this)" id="fadeOut">
<div id="divText">
This is a simple div with some text in it. This is another line of text.
All I am doing is continuing adding text to my div container. If I keep adding text guess what will happen. You have to scroll to see the rest!
</div>
</div>
The CSS is located in the JSFiddle link.
I know solution for this at jQuery
$("#fadeout").ckick(function(){
$(this).find("div").fadeOut().parent().remove();
});
You indicate jQuery via the tags, so here is a jQuery solution. It passes a callback function to the fadeOut function which removes the #divText.
function fadeOut(i) {
$(i).fadeOut(3000, function(){
$("#divText").remove();
});
}
One improvement I would recommend is to attach the event handler via javascript instead of inline.
Javascript
$("#fadeOut").click(function(){
$(this).fadeOut(3000, function(){
$("#divText").remove();
});
});
HTML
<div id="fadeOut">
<!--Content Here -->
</div>
JS Fiddle: http://jsfiddle.net/ZGp62/1/
You can easily do this with the fadeOut jquery function.
Example:
$( "#buttonID" ).click(function() {
$( "#thedivID" ).fadeOut( "slow", function() {
//this removes the div from the DOM
$( "#thedivID" ).remove();
});
});
See more examples and documentation here: http://api.jquery.com/fadeOut/
I have a table that you can select rows and edit fields with from a dialog. These table rows typically have an icon for drag and drop capability, as well as an icon for attachments. The issue is that when you edit the text from the dialog, the icons clear regardless of whether I use .html() or .text(). I believe using a form of .content() is viable, but I'm not sure how to go about it. I've tried to avoid clearing the images with .not() with no luck. Any ideas? Thanks in advance. http://jsfiddle.net/BWCBX/11/
$( ".saveBtn" ).click(function() {
properties.eq(0).html($("#name").val());
properties.eq(1).html($("#perm").val());
});
With what you have you can just replace the text like this:
$(".saveBtn").click(function () {
properties.get(0).firstChild.nextSibling.nodeValue = $("#name").val();
properties.eq(1).text($("#perm").val());
$(".prop").dialog("close");
});
Fiddle
But it would be better to wrap your text in another element, and set the value for it for better operation.
you can use .content() like this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents()[1].textContent=$("#name").val();
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/19/
Edit
if you need the code to work on IE lower than 9 you can do this
$( ".saveBtn" ).click(function() {
properties.eq(0).contents().eq(1).wrap("<span></span>").parent().html($("#name").val());
properties.eq(1).html($("#perm").val());
$( ".prop" ).dialog( "close" );
});
http://jsfiddle.net/BWCBX/20/
I have two span elements in a page. when I call a jquery double click function on both then the function is called only on first element. I am using the following code:
<span id="shiftTime_1">1</span>
<span id="shiftTime_2">1</span>
and jquery function is:
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
when I double click on the element Id of shiftTime_1. then the function works fine. But when I double click on element Id of shiftTime_2 then this function does not respond.
Please help.
Thanks
Use .on if you plan to add elements dynamically (e.g. by using $( "body" ).append( "<span id='shiftTime_2'>1</span>" ); )
$( "body" ).on( "dblclick", "span", function() {
alert( "This works also with dynamically added elements" );
} );
try use inside $(document).ready()
$(document).ready(function(){
$("[id^='shiftTime_']").dblclick(function() {
alert("hello");
});
});
When I try the code, it works just fine:
http://jsfiddle.net/Guffa/pfQfK/
Check if there is something different from your code.