CODEWITHSUNDEEP
javascripthtmlcss
Grey-lover
Grey-lover

Reputation: 633

Div displays on click but for only a second

I am using onclick method on a link in order to display a div. However, the div disappears after displaying for a second.

function view() {
  document.getElementById('topmenu').setAttribute('style', 'display:block');
}
#topbar {
  background-color: yellow;
  overflow: auto;
}

#topmenu {
  display: none;
}
<header>
  <div id="topbar">
    <img src="/images/santorini-wedding-photographer-logo.png" style="float: left;">
    <span style="float: right;"><a href="" onclick="view()">MENU</a></span>
  </div>
  <div id="topmenu">
    some text here
  </div>
</header>

Upvotes: 0

Views: 60

Answers (2)

Steven Stark
Steven Stark

Reputation: 1259

Your anchor tag has a href attribute, which is following the link and changing the page contents. Remove the HREF ( which is actually a bad idea ), or better yet; use a span or something instead.

FYI: There are also multiple other solutions available to keep the href, but prevent the page from changing location.

function view() {
			document.getElementById('topmenu').setAttribute('style', 'display:block');
}
#topbar {
	background-color: yellow;
	overflow: auto;
}
#topmenu {
	display:none;
}
<header>
		<div id="topbar">
			<img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png" style="float: left;">
			<span style="float: right;"><a onclick="view()">MENU</a></span>
		</div>
		<div id="topmenu">
			some text here
		</div>
	</header>

Upvotes: 2

Rahul Viswanath
Rahul Viswanath

Reputation: 62

In your anchor tag, set your href to href="#!" so that the event doesn't propagate. And your code for the div to show works as expected.

It would also work with href="#", but this would take you back to the top of the page in case you're somewhere at the bottom.

Upvotes: 0

Related Questions