Develop Reference

Make button close a div (using Wordpress)

I'm using a plug-in (PopUp Maker) to create a pop-up landing page. Inside it I have a button (made by me) that should close this pop-up.
I have no clue how to do it. I tried adding some javascript but is not working, and the thing is that I don't know if it's my code that isn't correct, Wordpress not reading my javascript file, or the plug in preventing me from doing it.
Any suggestions?
Here's the code I tried:
$(document).ready(function() {
$('.close-button').on('click', function(){
$(this).parent().fadeOut('slow', function(){
});
});
});

Here is a Native Javascript Solution to Close or open a Div by onclick.
function myFunction(){
if (document.getElementById('idofpopupdiv').style.display == "none") {
document.getElementById('idofpopupdiv').style.display = 'block';
document.getElementById('idofpopupdiv').style.visibility = 'visible';
} else {
document.getElementById('idofpopupdiv').style.display = 'none';
document.getElementById('idofpopupdiv').style.visibility = 'none';}}
and your button should have an onclick event to call the function.
<button onclick="myFunction();">Button Name</button>
Hope this helps.

Just replace #idofpopupdiv with the id of your popup div or a classname
$(function() {
$('.close-button').click(function() {
$('#idofpopupdiv').fadeOut('slow', function () {
});
});
});

Second Show Div Function Not Working

I am trying to use show div on click. But First One is working properly but not second one.
<script type="text/livescript">
function showDiv() {
div = document.getElementById('change_pass');
div.style.display = "block";
}
function showDiv1() {
div = document.getElementById('invite-friend_now');
div.style.display = "block";
}
</script>
And Using links onclick :
Change Password
Invite Friend
On clicking Change Password, That division pop ups properly. But when we click on Invite Friend link, Page go to top and url shows www.example.com/# only.(....trailing # only)

You could be passing some parameter to use just one function. Also, you can use preventDefault() to prevent the page from scrolling up:
<script type="text/livescript">
function showDiv(e, divName) {
div = document.getElementById(divName);
div.style.display = "block";
e.preventDefault();
}
</script>
Change Password
Invite Friend
Also, check on this invite-friend_now ID as I think you might have misspelled it.

I think it is going to be easier by using jQuery this way:
<button id="show_div">show div</button>
<div id="To_be_shown" style="display: none;"><p>some text</p></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$("#show_div").click(function () {
$("#To_be_shown").fadeIn(100);
});
</script>

How to hide or show div on click?

I'm trying to create a button which will show a div if it is hidden, or hide the div if it is already shown (doing it in javascript). I've written this code to be used onclick but it doesn't seem to work and I can't see why. Can someone see what I have done wrong?
if (document.getElementById('Hidey').style.display == 'none') {
document.getElementById('Hidey').style.display = 'inline'
}
else {
document.getElementById('Hidey').style.display = 'none'
}
EDIT:
HTML
<div id="Button" onclick="javascript posted above here"><h2>Click</h2></div>
<div id="Hidey">Content Inside</div>
That's the HTML being effected, nothing else in my code effects these. I'm simply confused.

I've set up a plunker here http://plnkr.co/edit/EkuW8nEIV22vmuaDM9JR?p=preview.
<script>
var toggle = function(){
if (document.getElementById('Hidey').style.display == 'none') {
document.getElementById('Hidey').style.display = 'inline'
}
else {
document.getElementById('Hidey').style.display = 'none'
}
}
</script>
<h1 id="Hidey">Hello Plunker!</h1>
click me
Your code seems good. I think you maybe weren't setting up the function correctly or calling the function correctly.

Use jQuery and just use this:
$("button").onclick( function() {("#Hidey").toggle();});

Changing CSS Styles with javascript for a phone app

I have a page that will be displayed on a phone. On the page I have a link
when clicked runs a javascript script. In the script I want to hide a
with the class name, content and display the with the class name, sidebar1. I put an alert in the script to show that the script runs when the
link is clicked. It will come out when I get the script running. Right now the
commands after the alert do not work. Can someone help? Here is my script:
<script type="text/javascript">
function displaymenu() {
alert("I'm the menu");
document.className.content.style.display = 'none';
document.className.sidebar1.style.display = '!important';
};
</script>

If you want to update a style on a particular element, you should use the element id:
document.getElementById("myDIV").style.display = 'none';

Try using getElementsByClassName()
document.getElementsByClassName('content');
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementsByClassName
or with jQuery
$('.className').hide();

Change your code to this
<script type="text/javascript">
function displaymenu() {
alert("I'm the menu");
var content = document.querySelector(".content"),
sidebar1 = document.querySelector(".sidebar1")
content.style.display = 'none';
sidebar1.style.display = 'block';
};
</script>

Try something like this,
document.getElementsByClassName("myClassName").style.display = "none";
document.getElementsByClassName("sidebar1").style.cssText = 'display:inline !important';

Javascript popup and close

HTML
<ul>
<li class="first">Intro</li>
<li>Crew</li>
</ul>
CSS
.page-popup {
z-index:500;
position:absolute;
left:345px;
background:#fff;
width:680px;
height:325px;
top:175px;
display:none;
}
JavaScript:
$('.first').click(function() {
var onOff=false;
if (onOff=false) {
$('.page-popup').fadeIn('slow', function() {
// Animation complete
});
onOff = true;
} else {
$('.page-popup').fadeOut('slow', function() {
});
onOff = false;
}
});
I am trying to create an open close popup effect. When they click on the link the popup fades in, when I click on the link again the popup fades out.
*UPDATED. I have figured out how to make it work. I must place the declare:
var onOff=false;
at page load not when the onclick is executing otherwise it always resets it.......and of course using == for comparison :)

Your condition is incorrect if (onOff=false). It should be if (onOff==false)
Hope this works out for you.

As other users already mentioned, you must correct your condition to if (onOff==false)
also you might want to prevent the default event handler on the click from executing. Change your code to
$('.first').click(function(event) {
event.preventdefault();
//rest of the code
}
This will prevent unnecessary scrolling of the page.