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 () {
});
});
});

javascript, div buttons with if else

$(document).ready(function() {
$('#b1').click(function() {
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('#uch2').toggle("slow");
})
})
I'm not a programmer but somehow managed to make div buttons that opens another div when clicked but I cant manage how to make so that when I click on one button that opens div and then when I click on other button it opens div and hides previous div. I want to integrate it later to joomla template, but as I use jquery and all efforts with if not working maybe someone is clever then me. thanks in advance. I place here working fiddle too.
fiddle example of my buttons
affter some usefull answers i reedited my code and managed to simplify it and added third button , now with extra css class everything seems pretty good but when i click already opened div it reappears as if looping.
edited fiddle
$(document).ready(function() {
$('#b1').click(function() {
$('.bats').hide("slow");
$('#uch').toggle("slow");
});
$('#b2').click(function() {
$('.bats').hide("slow");
$('#uch2').toggle("slow");
});
$('#b3').click(function() {
$('.bats').hide("slow");
$('#uch3').toggle("slow");
});
})

You can call hide('slow') on the other uch element on click of the button. Try this:
$('#b1').click(function() {
$('#uch').toggle("slow");
$('#uch2').hide("slow");
});
$('#b2').click(function() {
$('#uch').hide("slow");
$('#uch2').toggle("slow");
});
Working example

Change ID To Class
$(document).ready(function() {
$('.b1').click(function() {
$('.uch').hide();
$(this).find('.uch').toggle("slow");
});
});
https://jsfiddle.net/u28f6yeL/5/

Here is a working solution for your problem:
change your JQuery code like this:
$(document).ready(function() {
$('#b1').click(function() {
if($('#uch2').css('display') != 'none'){
$('#uch2').toggle("slow");
};
$('#uch').toggle("slow");
});
$('#b2').click(function() {
if($('#uch').css('display') != 'none'){
$('#uch').toggle("slow");
};
$('#uch2').toggle("slow");
});
});
Here's a JSFiddle

you can write a function which close the one is opend! than call them in your click-funktions before toggle the other.

Hide/Show DIV from a href

I have a div which contains a google map, when the page loads I want to have the div hidden until I click the link to view. My problem is that the div always shows when the page loads. I can't for the life of me figure out why it wont show as hidden until clicked.
View on Map <i class="fa fa-map-marker"></i>
This is my div which holds the map (haven't included as no need to)
<div id="showmap">
</div>
javascript
<script language="JavaScript">
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
}
</script>
I've swapped the block & none around and still no joy,
How is it possible?
I did have it working through using a submit button, but I have more code that uses submit button to update a form to my db and everytime I clicked on the Show/Hide div it uploaded data, so I'm trying it this way unless you can have multiple submit on a page?

You can hide the element with CSS on initial page load:
#showmap {
display: none;
}

The div will have the style display set to block by default so it will always be shown when the page is loaded as it is now. Preferable set the display property to none
<div id="showmap" style="display:none;"></div>
Or you can set it in javascript on when the page has been loaded
window.onload(function () {
document.getElementById("showmap").style.display = "none";
}
But doing it by css is the way to go here.

Better to use jquery but your code is not working because you need to do in this style
<script language="JavaScript">
$(document).ready(function(){
toggle('map');
})
function toggle(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
} else {
document.getElementById(id).style.display = 'block';
}
return false;
}
</script>
<style>
#map{display:none}
</style>
or
<script>
$(document).ready(function(){
$('#map').toggle();
})
</script>
But the best way is to use css for hide(initial)
And ATTENTION FOR return false in your way of using

div appear on load, disappear on click

I am a newbie with javascript therefore I am requesting a little bit of help here.
Basically I have a very simple HTML page and inside it I will need a DIV to appear on window load and disappear when a user clicks on 'Close'.
At this moment, onload event works perfectly, but when I click on 'Close' the DIV is still there ( I think because windows loads again ).
Here is my javascript code:
function popup() {
document.getElementById("pop_up_main").style.display = "block";
}
document.getElementById("asd").onclick = function() {
document.getElementById("pop_up_main").style.display = "none";
};
BODY calls popup() function
<body onload="popup()">
pop_up_main is my DIV and inside it I have the anchor that needs to hide the div.
<div id="pop_up_main">
Close
Any help will be highly appreciated. If there is something that I've missed please let me know. Many Thanks!

Try This
function popup() {
setTimeout(function(){
document.getElementById("pop_up_main").style.display = "block";
},5000);
}
function hidePopup() {
document.getElementById("pop_up_main").style.display = "none";
};
<div id="pop_up_main" style="display:none;">
<a href="javascript:void(null);" onClick="hidePopup()" >Close</a>

Check the fiddle Demo Fiddle
<div id="pop_up_main">
Close
</div>
and Javascript
document.getElementById("asd").onclick = function () {
document.getElementById("pop_up_main").style.display = "none";
};

a tag reload the page and as you said it is the problem,use something other than a tag and style it like a :
cursor:pointer;
text-decoration:underline

Jquery anchor tag display problem

I am unable to show an anchor tag to display itself using .show() in Jquery or javascript. Conn Window is visible by default. It hides and displays the div but it is unable to do the same with anchor. I have manually tried to change it in firebug/IE dev tools and it works there. It just doesn't work when I do it with jquery/javascript.
Here is the HTML code:
<div id="connWindow">Conn Window
<div id="closeButton" onclick="javascript:connHide();"></div>
</div>
Here is the jquery code:
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
Any help will be greatly appreciated!

Why not bind your click events in jQuery as well
function connHide()
{
$('#connTab').show();
$('#connWindow').hide();
}
function connShow()
{
$('#connWindow').show();
$('#connTab').hide();
}
$(document).ready(function () {
$("#contab").click(function () {
connShow();
return false;
});
$("#connWindow").click(function() {
connHide();
});
});

The inline CSS display:none is overriding the mechanism jQuery uses to show and hide.
Hide the anchor programmatically instead:
HTML:
<div id="connWindow">
Conn Window
<div id="closeButton"></div>
</div>
Script:
$(function() { // on document load
$('#connTab').css('display', 'none');
// I'm going to replace your inline JS with event handlers here:
$('#connTab').click(function() { connShow(); return false; });
$('#closeButton').click(function() { connHide(); });
});
function connHide() {
$('#connTab').css('display', '');
$('#connWindow').css('display', 'none');
}
function connShow() {
$('#connWindow').css('display', '');
$('#connTab').css('display', 'none');
}
Hope that helps.

You don't need to state javascript: for onclick events. Try changing to:
<div id="closeButton" onclick="connHide();"></div>
I would also change the first line to the following: