Frand1951 Frand1951 - 1 year ago 66
HTML Question

Prevent multiple popups opening on click

I have created a website which uses a number of popups to display information. However, when any button is clicked, all the popups will open at once and will cover up the information I want to show.

Below is the code I have so far:


(I believe this may be where I have made my error as, when one button is clicked, clicking another button will simply close the popup and will not open a new one as I intended it to.)

function deselect(e) {
$('.pop').slideToggle('normal', function() {

$(function() {
$('#youtube, #youtube-popup').on('click', function() {
if ($(this).hasClass('selected')) {
} else {
// $(this).removeClass('#twitch');
return false;

$('.close').on('click', function() {
deselect($(this).closest('#youtube, #youtube-popup'));

return false;


.messagepop {
background-color: #ffffff;
opacity: 1;
color: #000000;
display: none;
bottom: 0px;
position: absolute;
text-align: center;
width: 100%;
height: 20%;
z-index: 50;
padding: 25px 25px 20px;
text-align: center;
vertical-align: middle;

.messagepop p,
.messagepop.div {
padding-top: 200px;


I may have over-complicated this part which may have lead to further errors.

<script src=""></script>
<body bgcolor="grey">

<div class="container">
<div class="row">
<ul class="list-inline">
<div class="hover">
<img href="" id="youtube" src="" padding="1px 1px 1px 1px"></div>
<div class="hover">
<img href="" id="twitter" src="" padding="1px 1px 1px 1px"></div>
<div class="hover">
<img href="" id="facebook" src="" padding="1px 1px 1px 1px"></div>

<div class="messagepop pop">
<div id="youtube-popup">
<font size=5><b>Text 1</b>
<br><font size=2>
Text 1.
<br><font size=5><b>Text 2</b>
<br><font size=2>Text 2.

<div class="messagepop pop">
<div id="twitter-popup">
<font size=5><b>Text 3</b>
<br><font size=2>Text 3.
<br><font size=5><b>Text 4</b>
<br><font size=2>Text 4.
<br><font size=5><b>Text 5</b>
<br><font size=2>Text 5.

<div class="messagepop pop">
<div id="facebook-popup">
<font size=5><b>Text 6</b>
<br><font size=2>Text 6.

If you need more information, please let me know.


Answer Source

As said, your HTML is not well formed at all([ul] tag must have [li] children, [font] is unsupported in HTML5), and your javascript is...bad!

You can achieve desired behavior with a single function

  $('img').on('click', function() {
    $('').each(function() { $(this).slideToggle();  $(this).removeClass('active'); $('#' + $(this).data('refli')).removeClass('selected'); });
    var myId= $('#' + $(this).attr('id'));
    var myPop= $('#' + $(this).attr('id') + '-popup');

Here you can find a quick sample