Develop Reference

jQuery, add css rule to specific element on click

I want after click on button my div with class text-internal(specific one - I I have more than one div with class text-internal) obtain max-height. As I said only specific div should obtain max-height - only this one, which is in container, which was clicked, others, which is not clicked not obtain max-height
I don't know if I explain it correctly and clear.
<div class="single-offer-text">
<div class="text-internal">
<?php echo $params->get('mytextarea'); ?>
</div>
<button class="read-more">Read more</button>
</div>
JQUERY
jQuery('.read-more-hide').click(function() {
jQuery('.text-internal').css('maxHeight', '150px');
});

Use any number of traversal methods to isolate specific instance.
prev() is a simple one that fits your scenario
jQuery('.read-more-hide').click(function() {
jQuery(this).prev('.text-internal').css('maxHeight', '150px');
});
Or if relationship is not so simple you can traverse up to a common parent using closest() and then find() within that parent
jQuery('.read-more-hide').click(function() {
jQuery(this).closest('.single-offer-text').find('.text-internal').css('maxHeight', '150px');
});

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();});

understanding jQuery parent, children and sibling

I am struggling to figure out where I am going with the current show and hide function I am trying to incorporate on my site. I have a drop down menu show and hide function similar to the one currently implemented at Hippodrome Mobile Casino. Which is identical to my HTML. My div class I am noticing with my Jquery when i click the next button .regNext it hides all three .regGroupContent divs. However i want to add and remove the active class which i current have as display:none on my site.
$('.regGroupContent').removeClass('active');
$('.regGroupContent').eq(0).addClass('active');
$('.regNext').click(function () {
var $this = $(this);
$('.regGroupContent').hide().removeClass('active');
$this.parent().children($('.regGroupContent')).show().addClass('active');
});
Html
<div class="vengeForm">
<div class="regGroupContent">
<div class ="fieldset">
<ul class="fieldset">
<li class="editor-next">
</li>
</ul>
</div>
</div>
</div>

This line has a bit of a syntax issue:
$this.parent().children($('.regGroupContent')).show().addClass('active');
In the children selector, you don't need a jQuery object, rather just the class name. Also, your .parent() selector is only going one level up, you need to get to the top of the element tree. Try changing it to:
$this.parents('.vengeForm').children('.regGroupContent').show().addClass('active');

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...) });

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/