Why does the text skip to the bottom line?

Asked

Viewed 53 times

1

Hello! I am doing a dynamic email signature and would like to put some "buttons" and etc. I made one with the function of showing the second number of the company, but when clicking on it the text is played to the bottom line.

How can I solve?

HTML code: 

<!DOCTYPE html>
<html>

<head>

	<script>    
    function ocultar(el) {
        var display = document.getElementById(el).style.display;
        if(display == "none")
            document.getElementById(el).style.display = 'block';
        else
            document.getElementById(el).style.display = 'none';
    }
  	</script>


  	<script>    
    function mostrar(id) { Array.from(document.getElementsByClassName("hidden")).forEach(div => div.style.display = "none"); if (document.getElementById(id).style.display == "block"){ document.getElementById(id).style.display = "none"; return; } document.getElementById(id).style.display = "block"; }
  	</script>
	
</head>

<body>

<p>Telefone 1: (DDD) XXXX-XXXX&nbsp; &nbsp; &nbsp; &nbsp; Telefone 2:

<a id="minhaDiv2" href="#" onclick="ocultar('minhaDiv2'); mostrar('minhaDiv')"> mostrar</a>
<a id="minhaDiv" class="hidden" style="display: none;">(DDD) XXXX-XXXX</a></p>

 <!--&nbsp; &nbsp; &nbsp;--><p><span style="font-weight: lighter;">Celular: (DDD) 9XXXX-XXXX</span></p>

</body>
</html>

function line-breaks

1 answer

1


When applying display: block in the element, it will occupy the entire width of the container, staying in a single row. Block elements tend to occupy the entire line.

Applique display: inline instead:

function ocultar(el) {
   var display = document.getElementById(el).style.display;
   if(display == "none")
      document.getElementById(el).style.display = 'inline';
   else
      document.getElementById(el).style.display = 'none';
}

function mostrar(id) {
   Array.from(document.getElementsByClassName("hidden")).forEach(div =>
      div.style.display = "none");
      if (document.getElementById(id).style.display == "inline"){
         document.getElementById(id).style.display = "none";
         return;
      }
      document.getElementById(id).style.display = "inline";
}
<p>Telefone 1: (DDD) XXXX-XXXX&nbsp; &nbsp; &nbsp; &nbsp; Telefone 2:

<a id="minhaDiv2" href="#" onclick="ocultar('minhaDiv2'); mostrar('minhaDiv')"> mostrar</a>
<a id="minhaDiv" class="hidden" style="display: none;">(DDD) XXXX-XXXX</a></p>

 <!--&nbsp; &nbsp; &nbsp;--><p><span style="font-weight: lighter;">Celular: (DDD) 9XXXX-XXXX</span></p>

Browser other questions tagged function line-breaks

You are not signed in. Login or sign up in order to post.