Problem showing/hiding Ivs when uploading site

Asked

Viewed 79 times

1

Hi, I’m using Jquery to show/hide Ivs. When I open the local page Ivs work normally (open and hide), but when you move the page up to the web (hosting), Ivs no longer work. I’ve looked at the inspect and it’s not showing any error. My question is, what might be causing this error? And if possible, help me with a more functional way of doing this? I thank you in advance.

That’s 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>
 <script src='lib/bootstrap/js/bootstrap.min.js'></script>
 <link rel="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>
jquery div
  • 1

    Wow young, please add the jQuery indexing link to your page??

  • I am using link CDN (<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>)

  • 1

    Ah, now that you’ve edited it all right...! But you should use a newer summer type a 3.1 or 3.2... not that it will solve the problem for sure, but it’s good practice to use newer versions if it doesn’t affect your script

  • Got it, I’ll switch to a more up-to-date version. Thanks for the tip!!

  • 1

    What version of Bootstrap are you using?

  • 1

    Please pass the link of your page that is giving problem on the internet

  • 1

    Check the Chrome Devtools "Network" tab to see if all. JS files are being uploaded to the page

  • I managed to solve the problem. Thank you very much!! There was a conflict in one of the code snippets. I am using version 4.0.0 of Bootstrap Here is the link: http://www.garotodati.com.br/divsMostrar

Show 3 more comments

1 answer

1


Your code has a lot of redundancy, starting with CSS: if the ids are exactly equal, you do not need to repeat separately, you can declare both at the same time. And also do not need to set width: 100% and margin: 0 auto since the div occupies the entire width of where you are, plus you are already centering the text with text-align: center;. Then I’d just be like this:

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

Another unnecessary thing is this function ocultar(). Beyond what you blend pure Javascript using document.getElementById('carimbo').style.display = 'none'; when you could just use the method .hide() jQuery with the two ids at the same time as selector, and can do this within the event itself .click without the need to call another function just to do that.

$('#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>
<script src="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 don’t need to declare type="text/javascript" of the script. That is no longer needed in HTML5.

  • Got it. Thanks for the tips!!

Browser other questions tagged jquery div

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