Develop Reference

How to show and hide div elements using vanilla js

Below is code where i tried to show and hide div elements using pure js. Since when i click button it take three click to hide the div elemnts and after that it run smoothly. I was trying to find how to show elemnts in first click.
var count = 0;
function showMee() {
var buttonHome = document.querySelector("#showMe");
count += 1;
buttonHome.addEventListener("click", function() {
if (count == 1) {
document.querySelector('#linkMeOne').style.display = 'none';
document.querySelector('#linkMeTwo').style.display = 'none';
} else if (count == 2) {
document.querySelector('#linkMeOne').style.display = 'block';
document.querySelector('#linkMeTwo').style.display = 'block';
count = 0;
}
});
}
#linkMeOne {
display: block;
}
#linkMeTwo {
display: block;
}
<div id="linkMeOne">
Hiding me As first time....
</div>
<div id="linkMeTwo">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" onclick="showMee()" />

Just toggle hidden.
If you want them to start out hidden, add the hidden attribute to the divs
const div1 = document.getElementById("linkMeOne");
const div2 = document.getElementById("linkMeTwo")
document.querySelector("#showMe").addEventListener("click",function() {
div1.hidden = !div1.hidden;
div2.hidden = !div2.hidden;
})
<div id="linkMeOne">
Hiding me As first time....
</div>
<div id="linkMeTwo">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" />

Just remove the addEventlistener and the code will start working.
var count = 0;
function showMee() {
var buttonHome = document.querySelector("#showMe");
count += 1;
//buttonHome.addEventListener("click", function() {
if (count == 1) {
document.querySelector('#linkMeOne').style.display = 'none';
document.querySelector('#linkMeTwo').style.display = 'none';
} else if (count == 2) {
document.querySelector('#linkMeOne').style.display = 'block';
document.querySelector('#linkMeTwo').style.display = 'block';
count = 0;
}
//});
}
#linkMeOne {
display: block;
}
#linkMeTwo {
display: block;
}
<div id="linkMeOne">
Hiding me As first time....
</div>
<div id="linkMeTwo">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" onclick="showMee()" />
Instead of using a variable, use a class to set the display to none.
function showMee() {
document.querySelector('#linkMeOne').classList.toggle('hidden');
document.querySelector('#linkMeTwo').classList.toggle('hidden')
}
#linkMeOne {
display: block;
}
#linkMeTwo {
display: block;
}
.hidden {
display: none !important;
}
<div id="linkMeOne">
Hiding me As first time....
</div>
<div id="linkMeTwo">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" onclick="showMee()" />

While there are many correct answers, all of them lack simplicity.
The easiest of all solution is to add an eventListener to the button and toggle a class to all elements with a certain class. That way you don't have to list every single element:
document.querySelector('#showMe').addEventListener('click', function() {
document.querySelectorAll('.linkMe').forEach(el =>
el.classList.toggle('d-block')
);
})
.linkMe {
display: none;
}
.d-block {
display: block;
}
<div class="linkMe">
Hiding me As first time....
</div>
<div class="linkMe">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" />

You could just toggle using a data attribute and some CSS. Here is a verbose version of that:
document.querySelector("#showMe")
.addEventListener("click", (event) => {
const t = event.target;
const showem = t.dataset.show;
document.querySelectorAll('.can-toggle').forEach((element) => {
element.dataset.show = showem;
});
t.dataset.show = showem == "show" ? "hide" : "show";
});
.can-toggle[data-show="hide"] {
display: none;
}
<div class="can-toggle">
Hiding me As first time....
</div>
<div class="can-toggle">
Hiding me as well as...
</div>
<input type="button" value="Check Me" id="showMe" data-show="hide" />
OR even independently with an initial state:
document.querySelector("#showMe")
.addEventListener("click", (event) => {
document.querySelectorAll('.can-toggle').forEach((element) => {
element.dataset.show = element.dataset.show == "hide" ? "show" : "hide";
});
});
.can-toggle[data-show="hide"] {
display: none;
}
<div class="can-toggle" data-show="hide">
Hiding me As first time....
</div>
<div class="can-toggle">
Hiding me as well as...
</div>
<div class="can-toggle" data-show="Ishow">
What am I?
</div>
<input type="button" value="Check Me" id="showMe" data-show="hide" />

javascript expand/collapse text - collapse on default

I'm very inexperienced in javascript but have managed (with the help of google) to put together the following expandable/collapsible link
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
}
</script>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
The only problem with it is that it is expanded by default and I wanted it collapsed by default. Can anyone help with this? Thank you!
Also, if anyone knows how to get +/- signs next to the link that change depending on whether it is expanded or collapsed, that would be great.

<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
var toggleIcon = document.getElementById('toggle-icon');
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block";
toggleIcon.innerHTML = '-';
}
else {
e.style.display = "none";
toggleIcon.innerHTML = '+';
}
return true;
}
</script>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
<span id="toggle-icon">+</span>
</p>
<p id="para1" style="display: none;">
<strong><em>text text text text</em></strong>
</p>

You can try putting in style statement the display option like below:
<p id="para1" style="display:none"><strong><em>text text text text</em></strong></p>
That can default collapse when you open your html, hope it help you...

Options 1:
Add this to your css to hide it by default:
#para1 {
display: none;
}
Options 2:
Move your script down, and call it initially toggleMe('para1'); so you will hide it first.
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
<script type="text/javascript">
function toggleMe(a) {
var e = document.getElementById(a);
if(!e) return true;
if(e.style.display == "none") {
e.style.display = "block"
}
else {
e.style.display = "none"
}
return true;
}
toggleMe('para1');
</script>

Daniel has the correct answer to your question. This is a bit more than you asked for, but I think you will have a better time if you manipulate classes instead of element styles properties. Just makes it a bit more flexible.
In the example below I wrapped your code in a common element and then changed that element's class to achieve your desired effect. That let me easily add in your plus and minus too.
It's a little raw but you can see where this can take you. Hope it helps.
https://jsfiddle.net/6xoe1b94/
function toggleMe(a) {
var e = document.getElementById('wrapper');
if(! e.classList.contains('active')) {
e.classList.add('active');
}
else {
e.classList.remove('active');
}
}
#para1{
display:none;
}
.active #para1{
display:block;
}
#plus{
display:inline-block;
}
#minus{
display:none;
}
.active #plus{
display:none;
}
.active #minus{
display:inline-block;
}
<div id='wrapper'>
<p>
<input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" /><span id='plus'>+</span><span id='minus'>-</span>
</p>
<p id="para1">
<strong><em>text text text text</em></strong>
</p>
</div>

I added a solution that removes the javascript and css from your html. I also changed your expand/collapse element to a div instead of input. I've added a span element within the div that changes it's text content (either + or -) based on whether #para1 is displayed or not. Also, in css I added display: none; to #para1 (this initially hides the element), cursor: pointer; (shows it is clickable when the user hovers over it) user-select: none; (stop div from highlighting when user clicks on it).
// store elements
var expandEl = document.getElementById("expand");
var plusMinusEl = document.getElementById("plusMinus");
var para1El = document.getElementById("para1");
// toggle function: pass element as argument
function toggleMe(el) {
// check if element is hidden
if(el.offsetParent === null) {
plusMinusEl.textContent = "-";
el.style.display = "block"
}
else {
plusMinusEl.textContent = "+";
el.style.display = "none"
}
}
// click function for expand div
expandEl.addEventListener("click", function() {toggleMe(para1El)});
#expand {
font-size:18px;
color:#008080;
cursor: pointer;
user-select: none; /* stop div from highlighting */
}
#para1 {
display: none;
}
<div id="expand">
LINK TO EXPAND <span id="plusMinus">+</span>
</div>
<p id="para1"><strong><em>text text text text</em></strong></p>

How to open a box on screen by clicking a link and hide it when clicked outside in JS

My goal is to have #box2 appear when I click on #box1 but when you click on something other than #box2, it will display none and only #box1 will show.
Here are my 2 boxes, they are just 2 styled divs:
var condition;
$(document).click(function() {
if (condition === 'block') {
$(":not(#box2)").click(function() {
$("#box2").hide();
});
}
})
$('#box1').click(function(e) {
$('#box2').css('display', 'block');
condition = 'block';
});
$('#box2').click(function(e) {
$('#box2').css('display', 'none');
condition = 'none';
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box1" style="width: 300px; height: 300px; background-color: red; margin-left: 100px; margin-bottom: 50px; position: absolute;">
</div>
<div id="box2" style="width: 300px; height: 300px; background-color: blue; margin-left: 150px; display: none; position: absolute;">
</div>
This current code works correctly the first time but after that, it wont run again. I am just wondering if there is a reset function or where I am going wrong?
Really what I want to do is make this work on an ipad so when the user clicks/taps away from the box, it will close. If there are better ways to do this on the Ipad tablet, please let me know!!
Any ideas?

Don't overcomplicate things. This is all the javascript you need, get rid of everything else:
$(document).click(function () {
$('#box2').hide();
});
$('#box1').click(function (e) {
e.stopPropagation();
$('#box2').show();
});

You could just filter event target at document level:
$(document).on('click', function(e) {
$('#box2').toggle(!!$(e.target).closest('#box1').length);
});
-jsFiddle-

You can listen to all click events of the document and then use the event.target to detect which element is being clicked. if the clicked element is box1 and box2 is not being shown then display it to the user. in any other condition we can hide the box2 if it's not the element being clicked. here is the vanilla JavaScript code to achieve this:
<html>
<body>
<div id='box1'>BOX ONE</div>
<div id='box2' style="display: none;">BOX TWO</div>
<script>
document.addEventListener('click', function(event) {
var secondBox = document.getElementById('box2')
if(event.target.id === 'box1' && secondBox.style.display === 'none'){
secondBox.style.display = 'block'
} else if (event.target.id !== 'box2') {
secondBox.style.display = 'none'
}
})
</script>
</body>
</html>
And if you are into DRY (Do not repeat yourself), you can define a function for this task. Take look at this modified version of the script:
function addOpenHandler(handler, target){
document.addEventListener('click', function(event) {
if(event.target === handler && target.style.display === 'none'){
target.style.display = 'block'
} else if (event.target !== target) {
target.style.display = 'none'
}
})
}
addOpenHandler( document.getElementById('box1'), document.getElementById('box2') )

$(document).click(function () {
if (condition === 'block')
{
$(":not(#box2)").click(function () {
$("#box2").hide();
});
}
})
The line $("#box2").hide(); is firing after every click

jQuery: keyup and keydown event

I'm trying to call the keydown and keyup event with JS. Howvever I get a syntax error. What's missing in the code?
HTML:
<body>
<div class="ryu">
<div class="ryu-still"></div>
<div class="ryu-ready"></div>
<div class="ryu-throwing"></div>
</div>
<div class="ryu-cool"></div>
</body>
CSS:
.ryu-cool {
display: none;
background-image: url('http://media-cdn.tripadvisor.com/media/photo-s/03/c5/42/a4/rainbow-spirit.jpg');
}
.ryu-still {
background-image: url('http://media-cdn.tripadvisor.com/media/photo-s/03/c5/42/a4/rainbow- spirit.jpg');
}
JS:
$(document).ready(function(){
$('.ryu').keydown(function(e){
if(e.keyCode == 88){
$('.ryu-still').hide();
$('.ryu-cool').show();
})
.keyup(function(e){
if(e.keyCode == 88){
$('.ryu-still').hide();
$('.ryu-cool').show();
});
});
});
The JSfiddle link: http://jsfiddle.net/3Ppdf/

Along with the code formatting issues other have pointed out, the code still won't function as expected without a small addition.
Working Fiddle
You will need to add a tab index to the <div> element that you want to monitor keyboard input on.
Your HTML should look like this:
<div class="main">
<div tabindex="0" class="ryu">
<div class="ryu-still"></div>
<div class="ryu-ready"></div>
<div class="ryu-cool"></div>
<div class="ryu-throwing"></div>
</div>
</div>
The JavaScript will also need to be updated to:
$(document).ready(function () {
$('.ryu').keydown(function (e) {
if (e.keyCode == 88) {
$('.ryu-still').hide();
$('.ryu-cool').show();
}
})
.keyup(function (e) {
if (e.keyCode == 88) {
$('.ryu-still').show();
$('.ryu-cool').hide();
};
})
});
Also, to get the images to display properly you have to give the <div>s an explicit width and height:
.ryu-cool {
display: none;
background-image: url('http://www.theprojectors.co.uk/img/p/187-219-thickbox.jpg');
width: 600px;
height: 600px;
}
.ryu-still {
background-image: url('http://media-cdn.tripadvisor.com/media/photo-s/03/c5/42/a4/rainbow-spirit.jpg');
width: 550px;
height: 364px;
}
Otherwise the <div>s will have a width and height of zero and therefore not displayed on the page.

You're missing the ending bracket for the if statements. Your code should be this:
$(document).ready(function(){
$('.ryu').keydown(function(e){
if(e.keyCode == 88){
$('.ryu-still').hide();
$('.ryu-cool').show();
}
})
.keyup(function(e){
if(e.keyCode == 88){
$('.ryu-still').hide();
$('.ryu-cool').show();
}
});
});
See updated JSFiddle: http://jsfiddle.net/3Ppdf/3/

Jquery Paginate placing items on second page and no limit on the list so not actually paginating

See my JsFiddle http://jsfiddle.net/iamdanbarrett/frbh9/
So this is inline JS for the paginate.....
<script>
$(window).load(
function()
{
var o=$('#paginate').first(),
h=o.height(),
c=$('<div/>').css('width',o.width()).addClass('part'),
cc,i=1,item,
p=$('<div id="pagination"></div>').append($('<a/>').text('['+1+']').data({i:0}));
o.before(p);
do{
if(typeof cc=='undefined'){cc=c.clone().appendTo(o);}
item=o.children().not('.part').first().appendTo(cc.first());
if(cc.children().length>0 && cc.height()>=h)
{
p.append($('<a/>').data({i:i++}).text('['+(i)+']'));
cc=c.clone().appendTo(o).append(item);
}
}while($('#paginate').first().children().not('.part').length>0);
if($('.part',o).length<2){p.remove();return;}
$('.part',o).not(':eq(0)').hide();
$('a',p).click(function(){
var _this=$(this);
$('a',_this.parent()).removeClass('current');
_this.addClass('current');
$('#paginate>.part').hide().eq(_this.data('i')).show();
}).first().addClass('current');
return;
});
</script>
This is external for the list update...
$(document).ready(function() {
$newItemField = $('#newItem');
$addButton = $('#add');
$('ol').sortable();
$('li').append('<span class="delete">x</span');
$('ol').delegate('li','mouseover mouseout',function() {
$(this).toggleClass('hovered');
});
$('ol').delegate('li>.delete','mouseover mouseout',function() {
$(this).toggleClass('hovered');
});
$('ol').on('click','li>.delete',function(){
$(this).parent().remove();
});
$newItemField.keypress(function(e) {
if (e.which == 13) {
addItem();
}
});
$addButton.click(function() {
addItem();
});
});
function addItem() {
if ($newItemField.val() !== '') {
$newItem = $('<li/>');
$newItem.text($newItemField.val());
$deleteButton = $('<span/>').text('x').addClass('delete');
$newItem.append($deleteButton);
$newItem.css('background-color','#e4ffef');
$newItem.appendTo('ol');
$newItem.animate({backgroundColor:'#FFFFFF'},5000);
$newItemField.val('');
}
}
I am having where by I have a list for tasks to be updated via an input and places it into an OL which works great and it works great with paginate but placing the items onto th seond page....
any ideas?

it's because ol element is inside second element of paginate div.
See below(you can see once it renders).
<div id="paginate">
<div class="part" style="width: 960px;"></div>
<div class="part" style="width: 960px; display: none;">
<ol class="ui-sortable"></ol>
</div>
<div class="part" style="width: 960px; display: none;"></div>
</div>
so, placing below code will do the trick and work as expected.
$(".ui-sortable").appendTo("#paginate div:first-child");
Now it's working...
http://jsfiddle.net/iashu/Nty7M/