I have two separate divs in the site I’m working on that show and hide when the user clicks on a link (there is a link for each div). The second div and link were added yesterday. When there was only one div and link there were no problems.
The problem I’m encountering is that when I click on the link to show the second div nothing happens. However, when I click on the link to show the first div, both show up. I tried changing the order of the markup, and when the second div is located before the first div in the markup the opposite happens – the first div does not show when its link is clicked, and both show up when the second link is clicked.
Since both of these divs are using fixed positioning and slide in from the right edge of the screen I thought the overlapping was causing the div not to display. But I increased the space between the divs to avoid the overlap and the problem remains. UPDATE: I’ve also tested making one of the panels be fixed on the left of the screen to totally rule out the overlap from the cause of the issue but the issue still occurred.
Is there any type of parameter or callback function that I can send into the show function to force jQuery to show an element?
Any help will be very much appreciated.
Here is the javascript:
$(document).ready(function(){
// Initialize Contact Us panel
$('#contacton').css('position', 'fixed');
$('#contacton').css('bottom', '60px');
$('#contacton').css('right', '0');
$('#contacton').css('overflow', 'visible');
$('#contacton').hide();
$('#contactoff').show();
var contacting = false;
//Initialize Newsletter Subscription panel
$('#subscribeon').css('position', 'fixed');
$('#subscribeon').css('bottom', '270px');
$('#subscribeon').css('right', '0');
$('#subscribeon').css('overflow', 'visible');
$('#subscribeon').hide();
$('#subscribeoff').show();
var subscribing = false;
// Expand Newsletter Subscription panel
$('#subscribeoff').click(function() {
if (subscribing) {
// Error - this should not happen as tab is hidden
} else {
subscribing = true;
$('#subscribeoff').hide();
$('#subscribeon').show('fast');
return false;
}
});
// Collapse Newsletter Subscription panel
$('#subscribeontab').click(function() {
if (!subscribing) {
// Error - this should not happen as tab is hidden
} else {
subscribing = false;
$('#subscribeon').hide('fast');
$('#subscribeoff').show();
return false;
}
});
// Collapse Contact Us panel
$('#contactontab').click(function() {
if (!contacting) {
// Error - this should not happen as tab is hidden
} else {
contacting = false;
$('#contacton').hide('fast');
$('#contactoff').show();
return false;
}
});
// Expand Contact Us panel
$('#contactoff').click(function() {
if (contacting) {
// Error - this should not happen as tab is hidden
} else {
contacting = true;
$('#contactoff').hide();
$('#contacton').show('fast');
return false;
}
});
});
The markup for these sections is located at the very end of the body section. Here is the markup:
<body>
<div id="header_section">
...
</div>
<div id="nav_menu">
..
</div>
<div id="body_wrap">
...
</div>
<div id="footer">
...
</div>
<div id="subscribeoff">
<a title="Subscribe to our FREE Newsletter" href="#"><img id="subscribeimg" src="/Epic/Boxes/subscribe-free-real-estate-newsletter-off.png" width="30" height="55" alt="Epic Properties Real Estate Newsletter" /></a>
</div>
<div id="contactoff">
<a title="Open Contact Us Panel" href="#"><img id="contactimg" src="/Epic/Boxes/contactoff.png" width="30" height="100" alt="Contact Us" /></a>
</div>
<div id="subscribeon">
<div id="subscribeformwrap">
<div id="subscribeinfo">
<p class="subscribetext">Sign up for the Epic Newsletter for the latest trends in the Valley's luxury real estate market.</p>
<p class="subscribetext" id="subscribelastp">If you are a member of Epic Properties you can subscribe to the Epic Newsletter by accessing your account.</p>
</div> <!-- end subscribeinfo -->
<div id="subscribeform">
<form id="newsletterform" name="newsletterform" method="post" action="/">
<fieldset class="subscribefields">
<label for="fname">FIRST NAME</label>
<input type="text" id="fname" />
</fieldset>
<fieldset class="subscribefields">
<label for="lname">LAST NAME:</label>
<input type="text" id="lname" />
</fieldset>
<fieldset class="subscribefields">
<label for="email">E-MAIL:</label>
<input type="text" id="email" />
</fieldset>
<fieldset class="subscribefields" id="subscribebtn">
<input type="submit" name="send" id="subscribebutton" value="Sign Up" />
</fieldset>
</form>
</div> <!-- end subscribeform -->
<div id="subscribeontab">
<a title="Close Newsletter Panel" href="#"><img id="subscloseimg" src="/Epic/Boxes/subscloseoff.png" width="30" height="55" alt="Close Newsletter Panel" /></a>
</div> <!-- end subscribeontab -->
</div> <!-- end subscribeon -->
<div id="contacton">
<div id="contactformwrap">
<div id="contactinfo">
<h5 class="contacttitle">Contact Us</h5>
<p class="contacttype">Phone:</p>
<p class="contacttext">000.000.0000</p>
<p class="contacttype">Fax:</p>
<p class="contacttext">000.000.0000</p>
<p class="contacttext" id="vcard"><a title="Epic Properties vCard" href="#">Download our vCard</a></p>
</div> <!-- end contactinfo -->
<div id="contactform">
<h5 class="contacttitle" id="msgtitle">Send a Message</h5>
<form id="messageform" name="messageform" method="post" action="/">
<fieldset class="contactfields">
<label for="name">NAME:</label>
<input type="text" id="name" />
</fieldset>
<fieldset class="contactfields">
<label for="email">E-MAIL:</label>
<input type="text" id="email" />
</fieldset>
<fieldset class="contactfields">
<label for="email">MESSAGE:</label>
</fieldset>
<textarea id="contactmessage"></textarea>
<fieldset class="contactfields" id="sendmsgbtn">
<input type="submit" name="send" id="sendmsgbutton" value="Send Message" />
</fieldset>
</form>
</div> <!-- end contactform -->
<div id="contactontab">
<a title="Close Contact Us Panel" href="#"><img id="closeimg" src="/Epic/Boxes/closeoff.png" width="30" height="100" alt="Close Contact Us Panel" /></a>
</div> <!-- end contactontab -->
</div> <!-- end contacton -->
</body>
</html>
And finally here is the CSS:
#subscribeoff {
display: none;
position: fixed;
bottom: 270px;
right: 0;
}
#subscribeoff a img {
border: none;
}
#subscribeon {
display: block;
position: fixed;
bottom: 270px;
right: 0;
background: #000;
background: rgba(0, 0, 0, .8);
}
#subscribeontab {
position: absolute;
bottom: 0;
left: -30px;
}
#subscribeontab a img {
border: none;
}
I think your HTML is missing a closing div tag (to the
<div id="subscribeformwrap">)If you inspect the elements on the page (using Firebug or Safari) your “contacton” div is actually within the “subscribeon” div