Develop Reference

Javascript: on div click expand div height, and on second click collapse div height?

I have the following javascript that adjusts my div height when a user clicks trend_exp_bt.
It works fine at the moment. However, if the user clicks trend_exp_bt again, i want to reset the div height (130px).
Please can someone show me how to do this, i've tried to look at toggle function on google but these don't seem to be working for me.
<script>
$('.trend_exp_bt').click(function(){
$('.trending_contain').animate({height:'500'})
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∧");
})
</script>

Maybe toggling a class would work for you?
document.getElementById('trend_exp_bt').onclick = function() {
document.getElementById('exp-panel').classList.toggle('expanded')
}
.panel {
width: 250px;
height: 130px;
border: 1px solid blue;
background-color: lightgrey;
transition: all 0.3s;
}
.expanded {
height: 300px;
}
<button id="trend_exp_bt">Expand</button>
<div id="exp-panel" class="panel">
</div>

If you want to use click handlers, you will have to remove the "expand" handler and add a "collapse" handler after it is expanded. You will have to do the opposite when a user collapses the div element.
function expandDiv() {
$('.trending_contain').animate({height:'500'});
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∧");
$('.trend_exp_bt').off('click').on('click', collapseDiv)
}
function collapseDiv() {
$('.trending_contain').animate({height:'200'});
$('.trend_exp_bt').css("line-height", "30px");
$('.trend_exp_bt').html("∨");
$('.trend_exp_bt').off('click').on('click', expandDiv)
}
$('.trend_exp_bt').click(expandDiv);

Make popup have smart positioning

I am working on a piece of legacy code for a table. In certain cells, I'm adding a notice icon. When you hover over the icon a <span> is made visible displaying some information. I would like to be able to make this <span> smart about its positioning but can't figure out a good method. I can statically position it but depending on which cell in the table it is in it gets lost against the edge of the page. I have done a JsFiddle here demonstrating the issue. Unfortunately, I am not allowed to use anything but HTML, CSS and vanilla JS.
The title attribute to most tags is pretty smart about its position. I have added a title to one of the cells in the table in the jsFiddle (cell containing "Hello"). Is there any way to make my span exhibit the same smart behaviour?

A pop-up can be added before any element by putting the popup html code inside a 'div' with 'position:absolute; overflow:visible; width:0; height:0'.
When these events: 'onmouseenter', 'onmouseleave' are fired on the element, just toggle the popup css attribute 'display' between 'none' and 'block' of the element.
Example on jsfiddle:
https://jsfiddle.net/johnlowvale/mfLhw266/
HTML and JS:
<div class="popup-holder">
<div class="popup" id="popup-box">Some content</div>
</div>
Some link
<script>
function show_popup() {
var e = $("#popup-box");
e.css("display", "block");
}
function hide_popup() {
var e = $("#popup-box");
e.css("display", "none");
}
</script>
CSS:
.popup-holder {
position: absolute;
overflow: visible;
width: 0;
height: 0;
}
.popup {
background-color: white;
border: 1px solid black;
padding: 10px;
border-radius: 10px;
position: relative;
top: 20px;
width: 300px;
display: none;
}

Change DIV display value using Javascript/Jquery function

Update: Fixed and working. Thanks everyone for the help.
Hello I'm making a javascript/jQuery button that when its clicked, a Div appears (display: inline-block), and when its clicked again the Div goes back to display: none. Ideally I would want to animate the movement, but I really just want to get it working first.
My button...
<button> Menu Test </button>
My function (updated)...
<script>
$("button").click(function(){
$("#flexMenu").toggle("slow", function() {
});
});
</script>
The CSS for flexMenu...
#flexMenu {
/* display: inline-block;*/
position: fixed;
float: left;
background: #1f1f1f;
margin: 3.9em 0 0 0;
padding: .25em;
width: 15%;
height: 6em;
border: 2px solid #fff;
z-index: 100;
}
I'm really just to sure how to grab the display property of the ID and change it. I've done a hover function before using CSS ease-out to make divs grow in size when hovered and change class by using $(this).toggleClass(nameOfClass), but I have never tried just changing an element. The other questions like this didn't really fit just changing the display value. Thanks for any help.

you should use jquery :
$("button").click(function(){
$("#flexMenu").toggle();
});

Updated with the jQuery .on() method which allows you to bind specific events to that button (event listeners).
$("button").on('click', function () {
$('#flexMenu').toggle("slow");
});
Fiddle

Wrap a Span Using Jquery

I have toggle menu. The code is working fine, the problem is the first time there is a span inside the but when I click on the menu the span is missing. I'm using this span to show the down arrow. I need to wrap a span inside as shown as the below code on every click. Here is my code
<div class="col-sm-12 seach-blk">
#selectedProductType <span></span>
<div id='cssmenu'>
<ul>
<li>categoryName 1</span> </li>
<li>categoryName 2</span> </li>
</ul>
</div>
</div>
Jquery
$(document).ready(function () {
// Initially hide submenu
$('#cssmenu').hide();
$('#open-menu').click(function (e) {
//Prevent href
e.preventDefault();
// Toggle the menu item
$('#cssmenu').toggle();
});
});
CSS
.srch-btnnew span {
position: absolute;
right: 15px;
background: url(../images/down-arrownew.png) repeat-x;
width: 12px;
height: 9px;
top: 22px;
}
Thanks

You are using empty html <span></span> that's why the browser might be removing that. So try using <span> </span>
Or you could put some text in span and use font-size: 0; for that.
Also try e.stopPropagation() instead of e.preventDefault()

Your code is working fine. Not span removed when clicking a tag.
I have tested in jsfiddle find the below link
JSFIDDLE LINK
I m not sure ,maybe in your a tag need space like ('&nbsp') otherwise CSS is affecting your arrow path
CODE :
// Initially hide submenu
$('#cssmenu').hide();
$('#open-menu').click(function (e) {
//Prevent href
e.preventDefault();
// Toggle the menu item
$('#cssmenu').toggle();
});

The <span> element is not being removed. It is an inline element, and therefore width and height do not apply to it. You can change it to a block element by adding display: inline-block; to the styling.
.srch-btnnew span {
display: inline-block; /* <-- Add this to make it a block element */
position: absolute;
right: 15px;
background: url(../images/down-arrownew.png) repeat-x;
width: 12px;
height: 9px;
top: 22px;
}

Change CSS of Dynamic List Item

===UPDATE===
If I remove the style="display: none; from the template and apply the below method as recommended below, the empty container fires when you click on any other list item. What else can be done?
I have an ul list that is dynamically created at run time using jQuery and JSON (Using inline HTML is a template). I need the background CSS style to change when a user clicks on a list item (#navItem). I've tried everything under the moon that I can think of from inline class to .appentTo(), etc. What I have below works fine for hard-coded elements but Nothing seems to work with dynamically loaded content. Whats even more confusing is that the classes in the elements within the li tag initiate...???
Any help would be appreciated. Below are my code snippets. Thnx.
HTML:
<div id="navScrollContainer" class="navContentPosition">
<ul id="navContent">
// Display as 'None' to prevent a empty containter from showing -->
<li id="navItem" class="ulFx" style="display: none;">//<-THIS NEEDS TO CHANGE ONCLICK!!
<a class="navA">
<h1 class="navH1">.</h1>
<h2 class="navH2">.</h2>
<p class="navP">.</p>
<hr class="navHR" />
</li>
</ul>
</div>
<script type="text/javascript">
$('#navScrollContainer').on('click', '.ulFx', function() {
$(this).addClass("liFx");
});
</script>
This is the Function that injects the data into the DOM as a list:
function loadNav(url, container, appendE) {
$.getJSON(url, function(data) {
$.each(data.items, function() {
var newItem = $('#' + container).clone();
// Now fill in the fields with the data
newItem.addClass('ulFx');
newItem.find("h1").text(this.label);
newItem.find("h2").text(this.title);
newItem.find("p").text(this.description);
newItem.find("a").attr("href", this.gotoURL);
newItem.children().appendTo('#' + appendE);
});
$('#navHeaderTitle').text(data.listTitle);
iniScroll('scrollNav', 'navScrollContainer');
var target = data.targetKey;
// transition("#" + pageName, "show");
});
};
The CSS that need to happen (only on that item) when the user clicks on a Item:
#-webkit-keyframes
liBG {from {
background-color: transparent
}
50% { background-color: rgba(51,102,255,0.15); }
to {
background-color: transparent
}
}
.liFx {
-webkit-animation-name: liBG;
-webkit-animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
}
The Class atributes given to the li items:
.navH1 {
font-size: 18px;
color: #FFA500;
text-decoration: underline;
font-weight: bold;
margin-top: 8px;
margin-bottom: 8px;
margin-left: 15px;
}
.navH2 {
font-size: 16px;
color: #999999;
font-weight: bold;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 25px;
font-weight: bold;
}
.navP {
color: #888;
font-size: 14px;
text-align: justify;
margin-top: 5px;
margin-bottom: 16px;
margin-left: 25px;
margin-right: 10px;
}
.navA {
text-decoration: none;
}
.navHR {
border: none;
background-color: #336;
height: 1px;
}

This will watch for dynamic elements:
$(".liFx").live("click", function() {
$(this).addClass("liBG");
});

Without seeing your click handler, I can only speculate. However, generally when the problem is related to dynamic content and having them respond to stimulus, the problem lies in how you are attaching the handler.
If you use .click(), or .trigger('click'), the handler will be applied directly to the elements you are calling these functions on. That means that if the elements do not currently exist, they will not receive a handler.
The way to get around this, is to attach the event listener to a parent element that will always exist and then watch for the event propagating up from the dynamic child element. You could do this manually, by looking at the event.target, but jQuery, as usual, makes this easy for us.
The modern jQuery way of doing this is using .on() (documentation):
$('#someparent').on('click', '#childselector', function() {
// my handler code
});
jQuery then attaches a handler on #someparent, and when it sees a click that was targeted at #childselector, it fires.
If you want to apply a class to a child of #navContent, and #navContent will always exist, do this:
$('#navContent').on('click', 'li', function() {
$(this).addClass("liFx");
});
If #navContent is dynamic too, simply go higher in the DOM tree.
As a side note, I notice that the li has an id of navItem. This sounds an awful lot like a class, rather than an ID. If you are going to have more than one navItem, they cannot all have the same ID. This is what classes are for:
<li class="navItem liFx" style="display: none;">

I am not sure where is the problem, but you are trying to do something as such:
$("#navlink").on('click', function() {
$("#yourselector").css("backgroundColor", "#ddd"); //change the color
});

I added another div and an addClass() method to my function along with Jeff B's answer above. If the class is hard coded into the tag, it doesnt function.
<ul id="navContent">
<li id="navItem" style="display: none;">
<div>//ADDED THIS TAG TO EXCEPT THE CLASS
<a>
<h1>.</h1>
<h2>.</h2>
<p>.</p>
<hr/>
</a>
</div>
</li>
</ul>
In my js file:
$.each(data.items, function() {
var newItem = $('#' + container).clone();
// Now fill in the fields with the data
newItem.find("div").addClass("ulFx");//ADDED THIS METHOD
newItem.find("h1").text(this.label);
newItem.find("h2").text(this.title);
newItem.find("p").text(this.description);
newItem.find("a").attr("href", this.gotoURL);
newItem.children().appendTo('#' + appendE);
});