We Keep Coding

how to expand the text on clicking the read more button or link?

I have a js function which toggles between two spans of texts. One is smaller text with class collapsed and the other is full text with class expanded.
here is my js
$(document).ready(function() {
$(".expanded").hide();
$(".expanded, .collapsed").click(function() {
$(this).parent().children(".expanded, .collapsed").toggle();
});
});
and my html look like this
<span class="collapsed">
some small text
READ MORE>>
</span>
<span class="expanded">
here come the full text to replace the small text
Less>>
</span>
The preset function replaces the text of one part with another. My problem is that when we click on any part of any span either collapsed or expanded, the text is changed. I want to restrict it to change the text only when one click the READ MORE>> or Less>> link. I have gone so far in this design that I cant change the function now. I want changes while staying the in present function. Any ideas??

You can use Readmore.js
$('#read').readmore({
speed: 75,
maxHeight: 100
});
EXAMPLE

$(document).ready(function() {
$(".expanded").hide();
$(".expanded a, .collapsed a").click(function(eve) {
eve.preventDefault();
$(".expanded, .collapsed").toggle();
});
});
fiddle
UPDATE
To solve the problem related to the posts.
$(document).ready(function() {
$(".expanded").hide();
$(".expanded a, .collapsed a").click(function(eve) {
var $container = $(this).parents("div");
eve.preventDefault();
$container.children(".expanded, .collapsed").toggle();
});
});
fiddle
Note that this code takes for granted that the spans are contained in a div (change if otherwise).
Hope that helps or at least gives you some ideas.
Kind regards.

How about this ? this will work on classes and is expandable.
$(".expanded a, .collapsed a").click(function() {
$(this).parent().children(".expanded, .collapsed").toggle();
});

Use this jQuery snippet to dig this issue
jQuery(document).ready(function() {
jQuery(".expanded").hide();
jQuery(".collapsed a").click(function() {
jQuery(this).hide();
jQuery(".expanded").slideDown();
});
jQuery(".expanded a").click(function(){
jQuery(".expanded").slideUp();
jQuery(".collapsed a").show();
});
});

Simple Javascript not working to hide div

I am trying to learn a little bit of java script, an any help would be greatly appreciated as I am pretty new to this world and just learning. I have tried looking up and down this site and have tried several suggestions from other users but none really seem to answer my issue.
I have this bit of code:
Im simply trying to get it to slowly hide a div box when the x is clicked. the button shows up and can be clicked but nothing happens. can someone help me out and show me what I'm doing wrong?
<div id="daily_deal">
<button id="close_x" onclick="myFunction($)"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
<div id="widget"><iframe src="dailydeal_widget.asp" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:155px; height:355px;" allowtransparency="true"></iframe></div>
function myFunction($) {
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});
})(jQuery);

You only need this bit:
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});
And then you can remove the onclick from the button:
<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
What it was doing is binding to the document ready event when you clicked the button, but as this has already happened the code that binds the click event is never run.

Use
<button id="close_x" onclick="toggleWidget();">
and
function toggleWidget() {
$("#widget").slideToggle("slow");
}

You can remove the $(document).ready() row. That is, remove line 2 and 6 from your function. It's implying that you want to do something when page has loaded, which will not occur at the same time as this function is called.

You only need this code:
$(document).ready(function() {
$("#close_x").on("click", function () {
$("#widget").slideToggle("slow");
});
});
the onclick="myFunction($)" is not neccessary anymore.

No need to call function in onclick, so your resultant html should be like this.
<button id="close_x"><img src="/assets/templates/blacbold_TEST/images/red_x.png" /></button>
And your script should be
$(document).ready(function() {
$("#close_x").click(function () {
$("#widget").slideToggle("slow");
});
});

you can try this function for hide and show div tag:
$(document).ready(function(){
$(".productDescription").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".productDescription").slideToggle();
return false;
});
});
Like HtmL Code:
See Full Description
<div class="productDescription">
<p>This very large bath bomb will fizz up to two minutes, how good is that. Drizzled with soap it looks so authentic. This cake slice has a scent of Tropical Fruit including Pineapple, Mango & Grapefruit and you'll be surrounded by gorgeous flowers and glitter. Hide</p></div>

Selecting elements to show and hide, traversal issue! (jQuery)

I have been trying every combination under the sun of parent()/children()/find() and selector syntax to .show() an element of my webpage that i hid on document ready, but I just can't get it to work! I'd really appreciate it if someone could take a look..
If you go to the portfolio section you can see it live here -> http://holly.im/ .
In any case the html looks something like this:
<div id="portfolio">
<h1>Heading</h1>
<div class ="little_column">
<div class="project">
click
</div>
</div>
<div id="c++_games_engine_construction" class="big_column">
<?php include "projects/C++_game_engine_construction.php"; ?>
</div>
</div>
And the relevant jquery:
$(document).ready(function() {
//hide all the big_columns /
// project details within the portfolio page
$('#portfolio').find('.big_column').hide(); //This seems to be working
});
$(function(){
$('.project').click(function () {
var selectedProject =
$(this).children('a.projlink').attr('href');
$(this).parent().parent().find(selectedProject).show(); //My most recent attempt, I though maybe i needed to go up the heirachy then back down? But whatever i try it doesn't show.
return false;
});
});
That's it really, thanks!

Having the character + in the ID of an element causes jQuery to become confused because the + character is reserved for the Next Adjacent Selector.
If you remove those characters from your code, it works just fine. As was mentioned in one of the comments to this answer, since the href is essentially the ID of the item to be shown, you can select it directly.
HTML
<div id="portfolio" class="section">
<h1>Heading</h1>
<div class="little_column">
<div class="project"> click
</div>
</div>
<div id="c_games_engine_construction" class="big_column">
I'm hidden at first!
</div>
</div>
JS
$(document).ready(function () {
//hide all the big_columns /
// project details within the portfolio page
$('#portfolio').find('.big_column').hide(); //This seems to be working
});
$(function () {
$('.project').click(function () {
var selectedProject = $(this).children('a.projlink').attr('href');
$(selectedProject).show(); //My most recent attempt, I though maybe i needed to go up the heirachy then back down? But whatever i try it doesn't show.
return false;
});
});
jsfiddle

The issue is with the + in the selector. It needs to be escaped because it has special meaning in the Selectors API (and is invalid for an ID).
If you removed the ++ from the href and the id, it works.
Alternately, you can do .replace(/\+/g, "\\+")
var selectedProject = $(this).children('a.projlink').attr('href').replace(/\+/g, "\\+")
Off topic: You don't need two .ready() calls, which is what you have, but using different syntax.

As others have mentioned, your problem are the + characters mistreated by jQuery. So the simple solution is: do not use jQuery - or at least, not for the selector thing. Since every target you have is an id selector, we can easily change it to
$(document).ready(function() {
$('#portfolio').find('.big_column').hide();
$('.project').click(function () {
var selectedProject = $(this).find('a').attr('href'); // a littebit simplified
var el = document.getElementById(selectedProject.slice(1));
$(el).show();
return false;
});
});

is(:visible) selector not working on class jQuery

Not sure how to explain this, I made a fiddle of what I'm attempting to do:
http://jsfiddle.net/x2btM/9/
here's my code:
HTML:
<div id="ZodOneDragBox">
<div id="aquariusSelectedComp1" class="killSelectedComp1" style="display:none;">
<img src="some.jpg">
</div>
</div>
<div id="ZodTwoDragBox">
<div id="aquariusSelectedComp2" class="killSelectedComp2" style="display:none;">
<img src="some.jpg" width="45" height="45">
</div>
</div>
<div id="aquariusIcnClick" class="iconClicker">
<img src="some_Icon.jpg" width="45" height="45">
</div>
Here's my jquery:
if ($('.killSelectedComp1').is(':visible')) {
//--SELECT BOX TWO
$('#aquariusIcnClick').click(function() {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
});
}
else {
//--SELECT BOX ONE
$('#aquariusIcnClick').click(function() {
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
});
}​
Basically when you click on aquariusIcnClick the image aquariusSelectedComp1 will appear in div ZodOneDragBox. aquariusSelectedComp1 with the class of killSelectedComp1 is now visible, so when you click on the icon aquariusIcnClick again, the image should appear in ZodTwoDragBox. It works for the first box, but the selector is not reading that the image with the corresponding class is currently visible therefor executing what's in the if statement and showing the image in the second box. Hope I explained this well enough, once again, here's my fiddle:
http://jsfiddle.net/x2btM/9/
Not sure what I'm doing wrong, I've googled to make sure that I'm using the :visible selector correctly any and all help is very much appreciated. Thank you
​

you don't need bind your click on div condition instead check your div visibility onclick
$('#aquariusIcnClick').click(function() {
if ($('.killSelectedComp1').is(':visible')) {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
}
else
{
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
}
});
Live Demo
​

Your code is only being executed once when the page loads / or the dom is ready. This means that your if statement is only tested once. You need to modify your code so that the if statement occurs within the click handler. This will mean the visibility of killSelectedComp1 is tested each time the click occurs and you can then make your decision on what to do.
As #rahul has done ;)

Do not bind event condition rather put condition in the event
Live Demo
$('#aquariusIcnClick').click(function() {
if ($('.killSelectedComp1').is(':visible')) {
$('.killSelectedComp2').hide();
$('#aquariusSelectedComp2').show();
}
else {
$('.killSelectedComp1').hide();
$('#aquariusSelectedComp1').show();
}
});​

find ID of parent DIV and fade DIV out

Im trying to fade out a DIV when clicking a link within the DIV itself. Here is my code:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeTo("slow", 0);
});
The reason I'm not specifying the ID directly is because I want to use this to fade out multiple DIVs with different ID's.
The above code was returning the ID when I setup an alert but not fading the DIV out or anything else I tried to so... any help here would be appreciated. The HTML is:
<div id="First-Block" class="item">
<p>text here</p>
<p>Back</p>
</div>
Thank you!

You should use fadeOut("slow") instead.
Try changing your code to:
$(".hideinfo").click(function () {
var parentLink = $(this).parent().parent();
$(parentLink).fadeOut("slow");
});
To improve this even further you can shorten your code to:
$(".hideinfo").click(function() {
$(this).closest(".item").fadeOut("slow");
});
Just to mention as well that by clicking on an anchor it will jump to the top of the page using #. I would take a look at .preventDefault()
You can also check out the API here -> http://api.jquery.com/fadeOut/

Use fadeOut() instead since your primary goal is to affect the overall visibiltity not a given opacity.

jsBin demo
$(".hideinfo").click(function( e ){
e.preventDefault(); // prevent default anchor link behavior
$(this).closest('.item').fadeTo(400, 0);
});
Additionally try to wrap the above into a document ready :
$(function(){
// code here.
});