We Keep Coding

position().left isn't giving the expected value

In the employee section of a Wordpress site, I'm trying to have the bio slide open in the correct position when you click on each employee photo.
It's working well when the row is full width (4 columns) and in mobile (1 column) but in the 2 column layout (480px to 882px), position().left is returning 0, so the negative margin isn't being properly applied and the bio goes offscreen.
I can't for the life of me figure out why this is... Any help is greatly appreciated!
The site in question: http://contractor-marketing.website/
The HTML (simplified):
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><!--content--></div>
</div>
</div>
The JS:
jQuery('.column').each(function(s, el) {
jQuery(this).find('.bio-full').eq(0).css('margin-left',-(jQuery(el).position().left));
});

Check my example below. Although I took a different approach, it essentially does what you want, and it even animates the element transition.
NOTE: This animation will happen EACH time you press the animate button. You must prevent such animation from happening more than once (if that is the behavior you are looking for). Also, change the $('#animate') selector and click event to the event of your choice.
$('#animate').click(function() {
$(".bio-full").animate({
left: "+=300",
}, 1000, function() {
// Animation complete.
});
});
body{
padding:0;
margin:0;
}
.bio-full{
background-color: red;
display:hidden;
position:relative;
width:300px;
left:-300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="animate">Animate</button>
<div class="row">
<div class="column column_1">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_2">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_3">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
<div class="column column_4">
<!--content-->
<div class="bio-full"><h1>Profile</h1></div>
</div>
</div>
I hope this helps!
Cheers!

Hide div if under ordered list with class

I am trying to hide a div that displays comment info if the comment is a child.
In the code below I am trying to make it so if "ol" has class of "children" then the div inside with the id "info" will be hidden.
Also open to other ways of hiding the div if the the comment is a child.
<ol class="children">
<li class="comment byuser comment-author-1 bypostauthor odd alt depth-2" id="comment-325" itemprop="review" itemscope itemtype="http://schema.org/Review">
<article id="comment-325" class="comment row">
<header class="comment-author vcard col-md-2 col-sm-3 col-xs-12">
<section class="comment-content comment col-md-10 col-sm-9 col-xs-12">
<div class="comment-meta"></div>
<div itemprop="reviewBody">
<div class='edit-comment-admin-links-no-icon ' id='edit-comment-user-link-325' style='background:none'>
<div style='display:none'>
<p>asdsadasdsadasasdasdas
<div id="info" class="cio-display cio-display-0">
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-service-provided">Service Inquired About:</div>
<div class="cio-field cio-field-service-provided">Buy/Sell Commercial</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-deal-completed">Deal Completed?</div>
<div class="cio-field cio-field-deal-completed">Yes</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-date-of-service">Date Of Service:</div>
<div class="cio-field cio-field-date-of-service">2015</div>
</div>
</div>
</div>
</div>
</section>
</header>
</article>
</li>
</ol>

Considering the code you posted, this is the CSS code that you need:
ol.children #info {
display: none;
}
However, assuming you have more than one of these comments, I have to add the following note:
Passing the same id to more than one element in your page is not a good idea. Ids should be unique identifiers of HTML elements. You should use a class for your purpose.
Now, assuming your to-be-hidden elements will always be wrapped in elements with itemprop="reviewBody", this is what you should use to hide them on ordered lists of comment that have the class children:
ol.children [itemprop="reviewBody"] {
display: none;
}
Here's the "cleaned up" version of your code:
<ol class="children">
<li class="comment byuser comment-author-1 bypostauthor odd alt depth-2" id="comment-325" itemprop="review" itemscope itemtype="http://schema.org/Review">
<article id="comment-325" class="comment row">
<header class="comment-author vcard col-md-2 col-sm-3 col-xs-12">
<section class="comment-content comment col-md-10 col-sm-9 col-xs-12">
<div class="comment-meta"></div>
<div itemprop="reviewBody">
<div class='edit-comment-admin-links-no-icon ' id='edit-comment-user-link-325' style='background:none'>
<div class="cio-display cio-display-0">
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-service-provided">Service Inquired About:</div>
<div class="cio-field cio-field-service-provided">Buy/Sell Commercial</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-deal-completed">Deal Completed?</div>
<div class="cio-field cio-field-deal-completed">Yes</div>
<div class="cio-display-start-new-row"></div>
<div class="cio-label cio-label-date-of-service">Date Of Service:</div>
<div class="cio-field cio-field-date-of-service">2015</div>
</div>
</div>
</div>
</section>
</header>
</article>
</li>
</ol>
Please note that the above code will hide the review body section of all the comments in your list if the list has the class children, including the top level ones. If an ordered list has even one children, it will probably have the class children added to it by WordPress.
If you only want to hide the review body section on level 2 comments (or higher) but keep them visible on level 1 comments, and assuming these level 1 comments have the added class of level-1 (I'm guessing, since you didn't show us a level 1 comment) , this is the CSS you should use:
ol.children>li:not(.level-1) [itemprop="reviewBody"] {
display: none;
}

Try $('ol.children #info').hide();

Expounding from Kyle Emmanuel's answer, try to use this jQuery selector
$('ol.children div[id="info"]').hide();
Use the div[id="info"] selector if you're looking for divs with info as id. The #info selector will only return the first DOM element with info as ID, which should be fine anyway since you should only alot unique IDs to your elements.

jQuery .after function for several elements

How to use "after" for several elements?
Initial position:
<div id="parent_div">
<div id="smth">data0</div>
<div id="this_to_move">data1</div>
<div id="this_to_move">data2</div>
<div id="this_to_move">data3</div>
<div id="smth">data4</div>
<div id="this_element_to_use">data5</div>
<div id="smth">data6</div>
</div>
The resultant:
<div id="parent_div">
<div id="smth">data0</div>
<div id="smth">data4</div>
<div id="this_element_to_use">data5</div>
<div id="this_to_move">data1</div>
<div id="this_to_move">data2</div>
<div id="this_to_move">data3</div>
<div id="smth">data6</div>
</div>
What is the most elegant way to do it using jQuery?

You need to switch to classes instead of ids as you won't be able to do something this way otherwise (ids should be unique to an element):
$('.this_to_move').insertAfter('.this_element_to_use');
Fiddle: https://jsfiddle.net/sLonnLqz/

How i can select specific div from multiple divs in jquery

I have something like this, and i need to show every div called "plink" just in the main div of each parent, so i tried to fadeIn ".plink" but its doing the same function for all the divs of "plink"
<script>
$(document).ready(function(){
$('.plink').hide();
$('.project').mouseover(function(){
$(this).next('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).next('.plink').fadeOut(200);
});
});
</script>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic2.png" border="0" alt="projectname"/></div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go"></div>
<div class="goplus"><img src="images/more.png" border="0"/></div>
</div>
<div class="pic"><img src="images/portfolio_pic.png" border="0" alt="projectname"/></div>
<div class="title">test2</div>
</div>

You can use find() instead of next()...
$(this).find('.plink').fadeIn(400);
because this is your .project div then you need to "find" the child elements that you are looking for. Using next() means you will get the very next element if it matches the selector (i.e. it is check to see if the next .project div matches the .plink selector)

I would go the FIND route like musefan suggested. Here is the solution code:
http://jsfiddle.net/bx7YC/
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test1</div>
</div>
<div class="spacer_project"></div>
<div class="project">
<div class="plink">
<div class="go">go</div>
<div class="goplus">goplus</div>
</div>
<div class="pic">pic</div>
<div class="title">Test2</div>
</div>​
$('.plink').hide();
$('.project').mouseover(function(){
$(this).find('.plink').fadeIn(400);
});
$('.project').mouseleave(function(){
$(this).find('.plink').fadeOut(200);
});​
I replaced the broken img links with simple text for the jsfiddle.

Toggle a repeated class in jQuery

I have this HTML code:
<div id="content">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="container" id="status-#">
<div class="message">
<span class="username">{username} Debugr Rocks!
</div>
<div class="info">24-oct-2010, 14:05 GMT · Comment (5) · Flag · Via Twitter
</div>
<div class="comment_container">
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=32&d=identicon" class="profile_img" alt="{username}"/>
</div>
<div class="comment_message">
<span class="username">{username}</span> Debugr Rocks! XD
</div>
<div class="comment_info">24-oct-2010</div>
</div>
</div>
<div class="profile_photo">
<img style="float:left;margin-right:7px;" src="http://gravatar.com/avatar/53566ac91a169b353a78b329bdd35c95?s=50&d=identicon" class="profile_img" alt="{username}"/>
</div>
That is repeated two or more times. What I want to do, is to when I click the "Comments (5)" link, the class "comment_container" appears, but only the one in the same "container" class.
It's this possible?

You can use .closest() to go up to the .container then .find() to look inside it, like this:
$(".toggle_comment").click(function() {
$(this).closest(".container").find(".comment_container").show();
});
You can try it here, if you're curious about finding other things relative to this here's a full list of the Tree Traversal functions.
As an aside, there's an error in your HTML that needs correcting, this:
<span class="username">{username} Debugr Rocks! </div>
Should be:
<span class="username">{username} Debugr Rocks! </span>