Show children/find - javascript

I have a few buttons and under every single one there is some div with display:none. All I want to do is to show the div after click under the particular button but it doesn't work and I don't know why. Could someone take a look at it please?
> button
<div class="hideHelper" style="display:none;">
</div>
here goes the script:
<script>
$(".settingsButton").click(function(){
$(this).find(".hideHelper").show();
})
</script>

Your code isn't working because find will search for children of the selector, and the div you wish to show is not a child of the button.
Try next:
$(".settingsButton").click(function(){
$(this).next(".hideHelper").show();
});

You can also find it using siblings as follows:
$(".settingsButton").click(function(){
$(this).siblings(".hideHelper").show();
});

Related

How do I get a jQuery function to work with specific elements when they have the same class names?

I have sections (divs) with text in it, but when the text is too long I made it so the text "fades" (with css) and displays a "show more" button, which shows the full text for that specific div when clicked. The problem is that it only works for the first div, and I believe it's because they all have the same class and id name. What's the best way to get around that? Here's my code:
HTML:
<div id="fade-container">
<div id="fade-content">
<p>
Long text goes here...
<div class="fade-anchor"><span class="btn-primary round-xl small btn-shadow">Show more</span></div>
</p>
</div>
</div>
Script:
<script>
$('.fade-anchor').click(function(e){
e.preventDefault();
$('#fade-content').css('max-height','none');
$('.fade-anchor').remove();
});
</script>
By the way, info is being fetched from the database in a php while loop.
When the user clicks on .fade-anchor you can use thisto get the element currently selected, you should also use classes instead of ids for multiple elements, like so:
$('.fade-anchor').click(function(e){
e.preventDefault();
$(this).parent('.fade-content').css('max-height','none');
$(this).hide(); // Maybe you should hide instead of removing, in case you want to add a toggle effect later on.
});
You can also check out this jsFiddle with the working version.
Hope it helps.
You can achieve it by e.currentTarget
$('.fade-anchor').click(function(e){
e.preventDefault();
$(e.currentTarget).css('max-height','none');
$('.fade-anchor').remove();});

Toggle Image Source on Click

I'm trying to do a typical expand and collapse function to display/hide a div on image click.
Here's my HTML:
<div id="result_location">
<h3>Heading Text here</h3>
</div>
<div class="result_menu"></div>
And my JavaScript:
$('#result_location').click(function() {
$('.result_menu').slideToggle("slow");
});
So there's going to be an image within the #result_location div, that alternates between a plus/minus when the .result_menu gets toggled.
Hope that kinda makes sense!
Have wrote a fiddle for you.
Basically toggling the source will done the trick.
Here is the code
Html
<div class="msg_list">
<p class="result_location">Heading Text here<img src="http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif"></img></p>
<div class="result_menu">
This <br/>
is <br/>
a <br/>
Testing <br/>
Content
</div>
</div>
javascript
$(".result_location").click(function(){
$(this).next(".result_menu").slideToggle("slow");
})
.toggle( function() {
$(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/ExpandSign.gif");
}, function() {
$(this).children("img").attr("src","http://prtlimages.cunamutual.com/ImageServer/Portal/B2B/CollapseSign.gif");
});
check the fiddle here
Assuming I read correctly, your "trigger" is .result_menu. Here is a JSFiddle that accomplishes what I think you're looking for: http://jsfiddle.net/trevanhetzel/P4N2c/
Essentially, we bind to the trigger element using .on("click") and then find the image to toggle and .slideToggle it. Pretty straightforward.
$(function () {
$(".result_menu").on("click", function () {
$("#result_location img").slideToggle();
});
});
You'll also want to display: none the image in the CSS.
Am I missing anything about your desired outcome?
You could toggle a class on #result_location and then add the arrow image as a CSS background image for that selector. When clicked again the class would be removed, thus removing/changing the image.

Javascript click function not reacting in proper parent

I have this javascript that animates a div into a parent div.
Javascript
$(document).ready(function() {
$("a").click(function() {
var $righty = $(this).next();
$righty.animate({
right: parseInt($righty.css('right'),10) == 0 ?
-$righty.outerWidth() :
0
});
});
});
HTML
<div id="home" class="page">
<div id="page1">
Inside Div
</div>
Outside Div
<div id="page2" class="page">
content
</div>
</div>
I want the <a> tag to live in the page1 div. As of now, the Javascript only works when the <a> tag lives in <div id="page1">. I apologize if this is very basic, as I am new to Javascript. Thank you!
Use a selector for your a tag, instead of just a. Like a class or an id. You don't want this to happen to every single a tag, right?
Also, righty is getting NEXT...well, there's nothing next to the a tag you want to hit.
You want to do $(this).parent().next(); - no, see edit below. I am guessing, because you never told us what you wanted, exactly.
EDIT: This may not help at all. Just know that you can't have an a tag in a div, and call .next() - it has no siblings. .next() hits the next sibling. Not as it appears visually on the page, but as it exists in the DOM tree....you need to have a sibling in the div for the a tag to grab with .next().....you don't. Does that make sense? What exactly are you trying to animate?
EDIT EDIT: Tell me the id or class of the tag you want animated when a given a tag with a given class or id is clicked, and I'll show you how to do it.
EDIT EDIT EDIT: If you just want to make page2 animate when page1 > a is clicked, do this:
$('#page1 a').click(function(){ $('#page2').animate(...put animation stuff here...) });

How to access a hidden Dom Element with jQuery?

I have a HTML Div (I'm using Twitter Bootstrap to hide-show div2) looking like this:
HTML:
<div id="div1">
<button id="mybtn">Button</button>
<div id="div2" class="modal hide fade span12" style="display: none;">
<button id="anotherButton" data-char="">AnotherButton</button>
</div>
</div>
With jQuery im trying to change the Value of data-char while im clicking on mybtn. But without success cause div2 is hidden. console.log($('#anotherButton')); return an empty array.
Is there a way to access hidden DOM with jQuery or Javascript?
*Edit: *
By trying this dont work better , return undefined:
$('#mybtn').live('click', function(e)
{
//or e.preventDefault();
$('#anotherbutton').attr("data-char", "assigned");
alert($('#anotherbutton').attr("data-char"));
});
You can assign it
Live demo
$(function(){
$('#anotherButton').attr('char', "assigned");
alert($('#anotherButton').attr('char'));
});​
on Button click
Live Demo
$(function(){
$('#anotherButton').attr('data-char', "assigned");
alert($('#anotherButton').attr('data-char'));
});​
It looks like data method will not work on elements which are in hidden state. You should use attr method.
This should work fine
$(function(){
$("#mybtn").click(function(e){
e.preventDefault();
$("#anotherButton").attr("data-char","new value");
});
});
Working sample http://jsfiddle.net/kshyju/a7Cua/4/
The fact that it is hidden changes nothing. The problem is probably that the js code is before the button HTML. Either put it after, or put it in a listener like $(document).ready() to make sure it has been processed when your try to access it.
Try $(button:hidden)
This usually works for things like this,
Source:http://api.jquery.com/hidden-selector/

Jquery - How to select an html element within a div, which is contained in an ASP.NET repeater ItemTemplate?

I have an ASP.NET repeater, which contains 3 divs inside the ItemTemplate.
Each div, in turn has a number of html elements. I would like to reference an element in the first div (the 3 divs are placed vertically and parallel to each other from left to right).
I have a button in the 3rd div. When pressed, I want to be able to select an element which is contained within the first div.
This is the code I've got so far:
$("#editButton").click(function () {
var nameBox = $(".nameBox", $(this).parent());
});
I'm not really sure how to select the element within the first div though. Could anyone kindly suggest some code please?
Just get the siblings and find the element with the class name.
Assuming your markup is like this:
<div>
<div class="namebox">found me</div>
</div>
<div>
</div>
<div>
<input type="button" id="btn" value="click"/>
</div>
$("#editButton").click(function () {
var nameBox = $(this).parent().siblings(':eq(0)').find('.nameBox');
});
jsFiddle Example
Why dont you assign an id to the div? Or use the first selector http://api.jquery.com/first-child-selector/

Categories

Resources