Develop Reference

Shrinking a Table in JavaScript

Never used JavaScript Before and I'm trying to fix this form in share point.
I want this text box to be small (like 1 row), until the user clicks it and then it should expand into a larger text box with like 10 rows. I apologize if this has been answered before, I don't even know what I should be looking for. Here is code I have that doesn't work, but does pop up an error message(I did not write this code):
alert(DescriptionID);
document.getElementById(DescriptionID).addEventListener("onmouseover", function(){
document.getElementById(DescriptionID).rows= "10";
});
document.getElementById(DescriptionID).addEventListener("onmouseout", function(){
document.getElementById(DescriptionID).rows= "1";
});
EDIT:
Here is what the current code will display:
EDIT2:
Thanks to a ton of help from you guys/gals I am close to finished! I can now understand it significantly better at least! Here is a picture of the code. The object is actually an "ms-formbody" ???
AND ANOTHER EDIT:
So here is the error i'm getting after using Johhny's code:

If you are using jQuery, this might work for you:
HTML:
<textarea id="expandingTextarea" rows="1">Enter Text</textarea>
JavaScript:
$(document).ready(function() {
$('#expandingTextarea').on('mouseover', function() {
$(this).attr('rows', '10');
});
$('#expandingTextarea').on('mouseout', function() {
$(this).attr('rows', '1');
});
});
I created an example here.
Update:
Using a click event to change/toggle to row count:
$(document).ready(function() {
$('#expandingTextarea').on('click', toggleExpand);
function toggleExpand() {
var oldRowCount = $(this).attr('rows');
var newRowCount = parseInt(oldRowCount) === 1 ? 10 : 1;
$(this).attr('rows', newRowCount);
}
});
Demo here.

In fact, you don't need JS to achieve what you want. CSS can do it for you.
<!--html-->
<textarea class="descr">This is description</textarea>
/*css*/
.descr {height: 20px;}
.descr:hover, .descr:focus {height: 120px;}

alter the height instead of the "rows" property.
open up the page in chrome, open the developer tools (View->Developer->Developer Tools) and then use "inspect" to select the text area you want to manipulate.
try playing around with the css of that element. then, write your javascript to change just the property that you want.
https://developer.chrome.com/devtools

The code you showed looks fine but DescriptionID should contain the ID of the description box. You can check what it is by right clicking on the description form and clicking "inspect element". Then assign var DescriptionID = "someID" at the beginning of the code.
Also, you might consider altering the height, not the rows.
If the form doesn't have an ID, look for an option to change the HTML and add one. If you don't have such an option, it's still possible to achieve what you want to do but you have to look beyond getElementById.

Trying to click on the 2nd element with the same class using Nightwatch.js

I have been trying out a lot of different ways to click on a particular element on the browser using Nightwatch.js (nth-child, nth-of-type, etc), and so far I am not able to find the correct element. I am trying to click on the 2nd "More" button on the screen.
The HTML looks like this. Both of the "More" buttons have the exact same class, and are nested within a div that has a key difference in the class, in that one is called discover-teams and the second is nested within a div that has a class of discover-athletes. If I try something like this, I end up clicking on one of the follow buttons on the image
.click('.discover-athletes div:nth-child(3) button')
If anyone knows of the best way to do this I would greatly appreciate it. So far I am coming up short. Much obliged

I see that the page has two ".discover-athletes" so the selector for 2nd button should be :
'test' : function(browser){
const 2ndSelector = 'div[class="discover-athletes"]:nth-child(2) > div:nth-child(3) > button';
browser.click(2ndSelector);
}
You need symbol ">" to make selector more accurate.
Edit:there is only 1 ".discover-athletes",but it make no difference.
'test' : function(browser){
const 2ndSelector = 'div[class="discover-athletes"] > div:nth-child(3) > button';
browser.waitForElementVisible(2ndSelector,5000,false,function(result){
browser.click(2ndSelector);
});
}

Try any one of them.
browser.click('.discover-athletes.discover-card div:nth-child(3) button');
OR
browser.click('.discover-athletes.discover-card div:discover-card-load-more.discover-card-footer button');
OR
browser.click('.discover-athletes.discover-card div:discover-card-load-more button');

I ended up finding a solution that worked.
.click('.discover-athletes .discover-card-load-more')
Just needed to keep digging a bit (this is my first time trying to search for elements in html using a testing framework). But I appreciate the answer you both submitted. Cheers

Ajax CSS bugg. How do i prevent from double click in order for the css to apply?

i have a div that says "on",
And i created a ajax function that everytime a user click the div. It will change the "on" to "off" (A query based on the users column will echo out if the div id is on or off ) and if the user clicks again it will switch it back to "on" again. This is how my code looks like
$(".buttons2").click(function(){
var d = $(this).attr("id");
if(d == "off")
{
$(".buttons2").css("background-position" , "0 -30px");
$(".buttons2").attr("id", "on");
}
else if(d == "on")
{
$(".buttons2").css("background-position" , "0 -1px");
$(".buttons2").attr("id", "off");
}
});
});
My problem is that, in order for the function to work, i have to click the div 2 times. What's the problem?

But it's a switch button. It depends on what the user has in the column. If the user has for example online= 1, it should start to switch in the opposite way. Off>on , on>Off. The div is based on a query

First, you should not use the ID tag like that! Changing an ID shouldn't really happen (unless you have a very good reason). A reason your code might not work is because the first value of the ID might not be right, or because the ID is not made to be change. The code provided in the question should just work.
One way would be by classes and toggle those. Easier to understand like this (IMO):
.buttons2{
background-position: 0 -30px;
}
.toggled{
background-position: 0 -1px;
}
<div class="buttons2"> Some Content</div>
And then use jquery to toggle it:
$('.buttons2').on('click', function(){
$(this).toggleClass('toggled');
});
I changed the $('.buttons2') in your code to $(this). I'm assuming there is only one .button (which, kinda ironicly, would make id="button2), so we use the 'this' to select it (much like your var d).
It's suggested in the comment you use data-* values for the intent you want. While the data-* attributes are intented for this (eg: data-state="on"), I choose classes because of jQuery's .toggleClass() because I find this easier for toggling.

jquery slide menu - better way?

I'm pretty new to javascript/jquery and I just built a simple slide menu.
It has 3 menus and each menu has a submenu...everything is working fine, I just want to know if there's a better way to accomplish the same task.
Here's my js code:
function menuOpen(menu){
if(menu=='menu1'){
$("#sub2").slideUp(400);
$("#sub3").slideUp(400);
$("#sub1").slideToggle(400);
}else if(menu=='menu2'){
$("#sub1").slideUp(400);
$("#sub3").slideUp(400);
$("#sub2").slideToggle(400);
}else if(menu=='menu3'){
$("#sub1").slideUp(400);
$("#sub2").slideUp(400);
$("#sub3").slideToggle(300);
}
}

without seeing your HTML:
LIVE DEMO
function menuOpen(menu){
var num = menu.match( /\d+/ ); // Regex expression to retrieve the Number
$('[id^=sub]').slideUp(); // slide UP all ID starting with sub
$('#sub'+num).slideToggle(); // get the desired ID :)
}
Use of jQuery means that we want to easily manipulate DOM elements , which means that without seeing a HTML sample of your DOM nodes and structure you're about to target it's hard to make the above even simpler.

append input value to a div jquery whilst user is typing

What I'm trying to do is append to text from a input field to a div as the user is typing...
So they can see what the text will look like.
What I have is the below.
jQuery('#options_6_text').keyup(function() {
jQuery('.product_zoom').appendTo(jQuery(jQuery(this).val()));
console.log(jQuery(this).val())
});
Now the console.log is working as I would have thought, however the text does not seem to be appending to the .product_zoom div, any ideas what I'm doing wrong??
Thanks!
EDIT
jQuery('#options_6_text').bind('keyup blur', function() {
jQuery('.product_zoom').text(jQuery(this).val());
});
This allowed me to do exactly what I was after.
Thanks

Change to this:
jQuery('.product_zoom').html(this.value);
You're going to want to use .html() for this, this way it replaces the div content each time the user types, the append() was adding to the current content each time.
Demo: http://jsfiddle.net/rRnSB/

Simply doing it like this: SIMPLE FIDDLE
$('#options_6_text').keyup(function() {
$('.product_zoom').text(this.value);
});