Problem showing / hiding divs when uploading site

Question

Problem showing / hiding divs when uploading site

Navigation

#1 by (1 votes)

1

Hello, I'm using JQuery to show / hide the divs. When I open the local page the divs work normally (open and hide), but when uploading the page to the web (hosting), the divs no longer work. I already looked at the preview and is not showing any errors. My question is, what could be causing this error? And if possible, help me with a more functional way of doing this? Thanks in advance.

This is the code I'm using:

<!DOCTYPE html>
<html>
 <head>
 <meta charset = "utf-8">
 <meta name = "viewport" content = "width:device-width, initial-scale=1">
 <title>Mostrar/Ocultar</title>
 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script><scriptsrc='lib/bootstrap/js/bootstrap.min.js'></script><linkrel="stylesheet" type="text/css" href="lib/css/estilo.css">
 </head>
 <body>
 <div class = "Menu-Lateral">
 <div class = "container">
  <div class = "row">
    <nav class = "menu">
      <ul>
        <li><a href="#" class = "conteudoDiv" data-element = "#carimbo"><i class = "fa fa-certificate"></i>Solicitar Carimbo</a></li>
        <li><a href="#" class = "conteudoDiv" data-element = "#auditorio"><i class = "fa fa-tty"></i>Portaria</a></li>
      </ul>
    </nav>
  </div>
</div>
</div>

<div id = "carimbo" class = "row">
 <h1>Carimbo</h1>
</div>

<div id = "auditorio" class = "row">
 <h1>Auditorio</h1>
</div>
</body>
</html>

CSS:

#carimbo
{
text-align: center;
width: 100%;
margin: 0 auto;
display: none;
}

#auditorio
{
text-align: center;
width: 100%;
margin: 0 auto;
display: none;
}

JQuery:

<script type="text/javascript">

function ocultar()
{
  document.getElementById('carimbo').style.display = 'none';
  document.getElementById('auditorio').style.display = 'none';
}

</script>

<!-- Controle das divs !-->
<script type="text/javascript">
jQuery(document).ready(function($)
{
  $('.conteudoDiv').on('click', function(e)
  {
    ocultar();
    e.preventDefault();
    el = $(this).data('element');
    $(el).slideToggle('slow');
   });
  });
  </script>

html jquery css div hospedagem

asked by anonymous 26.06.2018 / 15:37

1 answer

Compare two objects in JS / JQuery Use on-route controller method with Slim

score 1 · Accepted Answer

Your code has a lot of redundancy, starting with CSS: if the% s of% s are exactly the same, you do not need to repeat separate, you can declare both at the same time. And you also do not have to set id and width: 100% since margin: 0 auto takes up all the width of where it is, in addition you are already centralizing the text with div . Then it would look just like this:

#carimbo, #auditorio{
   text-align: center;
   display: none;
}

Another unnecessary thing is this text-align: center; function. In addition to that you mix pure JavaScript using ocultar() when you could just use the document.getElementById('carimbo').style.display = 'none'; method of jQuery with both .hide() s at the same time as selector, and you can do that within the id itself without the need to call another function just to do this.

$('#carimbo, #auditorio').hide();

Your optimized code looks like this:

$(document).ready(function(){
   $('.conteudoDiv').on('click', function(e){
      $('#carimbo, #auditorio').hide();
      e.preventDefault();
      var el = $(this).data('element');
      $(el).slideToggle('slow');
   });
});

#carimbo, #auditorio{
   text-align: center;
   display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class = "Menu-Lateral">
 <div class = "container">
  <div class = "row">
    <nav class = "menu">
      <ul>
        <li><a href="#" class = "conteudoDiv" data-element = "#carimbo"><i class = "fa fa-certificate"></i>Solicitar Carimbo</a></li>
        <li><a href="#" class = "conteudoDiv" data-element = "#auditorio"><i class = "fa fa-tty"></i>Portaria</a></li>
      </ul>
    </nav>
  </div>
</div>
</div>

<div id = "carimbo" class = "row">
   <h1>Carimbo</h1>
</div>
<div id = "auditorio" class = "row">
   <h1>Auditorio</h1>
</div>

You also do not need to declare the .click of the script. That is no longer needed in HTML5.