CODEWITHSUNDEEP
javascripthtmlcss
Grey-lover
Grey-lover

Reputation: 633

Change content and target of anchor tag on click

I am using the onclick method on a link ("MENU") to display a div (#topmenu) when clicked, but how do I change the text of the anchor tag to "CLOSE" when div (#topmenu) appears and make the div disappear when "CLOSE" is clicked? Could it be achieved without using jQuery?

function view() {
  document.getElementById('topmenu').setAttribute('style', 'display:block');
}
body * {
  box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
	.bar {
		width: 80%;
		margin: auto;
	}
}

@media only screen and (min-width: 1201px) {
	.bar {
		width: 1000px;
		margin: auto;
	}
}

.bar {
  display: flex;
  justify-content: center;
  position: relative;
}

.img img {
  display: block;
}

.button span {
  position: absolute;
  right: 0;
  top: 40%;
}

#topmenu {
	display:none;
	clear: both;
	height:80vh;
	vertical-align: middle;
	text-align: center;
}

#topmenu ul {
	list-style: none;
}
<div class="bar">
  <div class="img">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png">
  </div>

  <div class="button">
    <span style="float: right;"><a href="#!" onclick="view()">MENU</a></span>
  </div>
</div>

<div id="topmenu">
  <div style="text-align: left;">
    <ul>
      <li>About</li>
    </ul>
  </div>
</div>

Upvotes: 0

Views: 1558

Answers (4)

FrV
FrV

Reputation: 258

Try this

let isDisplayed = false;

function view() {
  isDisplayed = !isDisplayed;
  document.getElementById('topmenu').style.display = isDisplayed?'block':'none';
  document.querySelector('[onclick="view()"]').innerText = isDisplayed ? 'CLOSE':'MENU';
}

Upvotes: 0

Nick
Nick

Reputation: 1422

There are many different ways that you can do this using vanilla JavaScript. You can do this easily by setting the a tag to have id="text" and changing the text with a conditional statement that determines what the current value of the text is.

If the text is currently "MENU", it should be changed to "CLOSE" and set display: block. If the text is currently "CLOSE", it should change it back to "MENU" and toggle the topmenu id to be invisible. You can also toggle the styling itself by using toggle.

if (document.getElementById('text').innerHTML === 'MENU'){
    document.getElementById('text').innerHTML = 'CLOSE';
    document.getElementById('topmenu').setAttribute('style', 'display:block');
}
else {
    document.getElementById('text').innerHTML = 'MENU';
    document.getElementById('topmenu').setAttribute('style', 'visibility:hidden');
}


body * {
  box-sizing: border-box;
}

@media only screen and (max-width: 1200px) {
  .bar {
    width: 80%;
    margin: auto;
  }
}

@media only screen and (min-width: 1201px) {
  .bar {
    width: 1000px;
    margin: auto;
  }
}

.bar {
  display: flex;
  justify-content: center;
  position: relative;
}

.img img {
  display: block;
}

.button span {
  position: absolute;
  right: 0;
  top: 40%;
}

#topmenu {
  display: none;
  clear: both;
  height: 80vh;
  vertical-align: middle;
  text-align: center;
}

#topmenu ul {
  list-style: none;
}
<div class="bar">
  <div class="img">
    <img src="<?php bloginfo('stylesheet_directory'); ?>/images/santorini-wedding-photographer-logo.png">
  </div>

  <div class="button">
    <span style="float: right;"><a id="text" href="#!" onclick="view()">MENU</a></span>
  </div>
</div>

<div id="topmenu">
  <div style="text-align: left;">
    <ul>
      <li>About</li>
    </ul>
  </div>
</div>
<script>
  function view() {
    if (document.getElementById('text').innerHTML === 'MENU') {
      document.getElementById('text').innerHTML = 'CLOSE';
      document.getElementById('topmenu').setAttribute('style', 'display:block');
    } else {
      document.getElementById('text').innerHTML = 'MENU';
      document.getElementById('topmenu').setAttribute('style', 'visibility:hidden');
    }
  }
</script>

Upvotes: 1

Adnan Toky
Adnan Toky

Reputation: 1943

Try this solution using pure JavaScript.

var menu = document.getElementById("top-menu");
var btn = document.getElementById("menu-btn");

btn.addEventListener("click",function(e){
  menu.classList.toggle("open");
  if(e.target.textContent == "MENU"){
    e.target.textContent = "CLOSE";
  }
  else {
    e.target.textContent = "MENU";
  }
});
#top-menu {
  display: none;
}

.open {
  display: block !important;
}
<div id="top-menu">My Meny</div>
<a href="#" id="menu-btn">MENU</a>

Upvotes: 0

James
James

Reputation: 168

Apply a class to the topmenu instead of changing the style.

function view(event){
  event.preventDefault();
  document.querySelector("#topmenu").classList.toggle('open');
  if(event.target.innerHTML === "CLOSE")
    event.target.innerHTML = "MENU"
  else
    event.target.innerHTML = "CLOSE"
}

You need to pass event to your onclick function

<a href="#" onclick="view(event)">MENU</a>

in your css 

#topmenu.open{
  display:block
}


function view(event){
  document.querySelector("#menu").classList.toggle('red');
  if(event.target.innerHTML === "Red")
    event.target.innerHTML = "Blue"
  else
    event.target.innerHTML = "Red"
}
#menu{
  width:100px;
  height:100px;
  background:blue;
  transition:background 200ms;
}

#menu.red{
  background:red;
}
<a onClick="view(event)" href="#">Red</a>

<div id="menu"></div>

Upvotes: 4

Related Questions