jQuery toggle not working with lots of other JavaScript from an example nearby

Question

I have simple jquery toggle button following an example at How can I dynamically create derived classes from a base class:

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>

  </style>

  <script type="text/javascript">
    //Need an expert? I'm cody childers, cut-n-paste extraordinaire

    $('#contact-info-button').click(function() {
      $('#contact-info').toggle();
    });

    function toggle(div_id) {
      var el = document.getElementById(div_id);
      if (el.style.display == 'none') {
        el.style.display = 'block';
      } else {
        el.style.display = 'none';
      }
    }

    function blanket_size(popUpDivVar) {
      if (typeof window.innerWidth != 'undefined') {
        viewportheight = window.innerHeight;
      } else {
        viewportheight = document.documentElement.clientHeight;
      }
      if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
        blanket_height = viewportheight;
      } else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
          blanket_height = document.body.parentNode.clientHeight;
        } else {
          blanket_height = document.body.parentNode.scrollHeight;
        }
      }
      var blanket = document.getElementById('blanket');
      blanket.style.height = blanket_height + 'px';
      var popUpDiv = document.getElementById(popUpDivVar);
      popUpDiv_height = blanket_height / 2 - 150; //150 is half popup's height
      popUpDiv.style.top = popUpDiv_height + 'px';
    }

    function window_pos(popUpDivVar) {
      if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerHeight;
      } else {
        viewportwidth = document.documentElement.clientHeight;
      }
      if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
        window_width = viewportwidth;
      } else {
        if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
          window_width = document.body.parentNode.clientWidth;
        } else {
          window_width = document.body.parentNode.scrollWidth;
        }
      }
      var popUpDiv = document.getElementById(popUpDivVar);
      window_width = window_width / 2 - 150; //150 is half popup's width
      popUpDiv.style.left = window_width + 'px';
    }

    function popup(windowname) {
      blanket_size(windowname);
      window_pos(windowname);
      toggle('blanket');
      toggle(windowname);
    }

    setInterval(function() {
      if ($('#myDiv').hasClass('divClassRed')) {
        $('#myDiv').addClass('divClassBlue').removeClass('divClassRed');

      } else {
        $('#myDiv').addClass('divClassRed').removeClass('divClassBlue');
      }

    }, 1000);
  </script>
</head>


<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
  <p>trollface pic in here</p>
  <a href="#" onclick="popup('popUpDiv')">Click me to close</a>
</div>

<p>lorem ipsum is.. <a href="#" onclick="popup('popUpDiv')">a joke here</a>
</p>

<button href="#contact-info" id="contact-info-button">Contact Info</button>

<div id="contact-info" style="display: none;">
  <p>jon_do@example.com</p>
  <p>512-736-5555</p>
</div>

I am trying to get contactinfo button working. I get no error in DOM.

score 1 · Answer 1 · answered Feb 05 '17 at 08:10

1

Try this.

$('#contact-info-button').click(function() {
  $('#contact-info').slideToggle();
});

Slide toggle is awesome :)

answered Feb 05 '17 at 08:10

Web Dev Guy

1,693
3
18
42

score 1 · Accepted Answer · answered Feb 05 '17 at 08:11

I see it works. You made some error in html. Like </style> ending tag without any <style> starting tag. No <body> tag etc. See here:

//Need an expert? I'm cody childers, cut-n-paste extraordinaire

      $('#contact-info-button').click(function() {
          $('#contact-info').toggle();
      });

      function toggle(div_id) {
        var el = document.getElementById(div_id);
        if ( el.style.display == 'none' ) { el.style.display = 'block';}
        else {el.style.display = 'none';}
    }
    function blanket_size(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
            viewportheight = window.innerHeight;
        } else {
            viewportheight = document.documentElement.clientHeight;
        }
        if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
            blanket_height = viewportheight;
        } else {
            if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
                blanket_height = document.body.parentNode.clientHeight;
            } else {
                blanket_height = document.body.parentNode.scrollHeight;
            }
        }
        var blanket = document.getElementById('blanket');
        blanket.style.height = blanket_height + 'px';
        var popUpDiv = document.getElementById(popUpDivVar);
        popUpDiv_height=blanket_height/2-150;//150 is half popup's height
        popUpDiv.style.top = popUpDiv_height + 'px';
    }
    function window_pos(popUpDivVar) {
        if (typeof window.innerWidth != 'undefined') {
            viewportwidth = window.innerHeight;
        } else {
            viewportwidth = document.documentElement.clientHeight;
        }
        if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
            window_width = viewportwidth;
        } else {
            if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
                window_width = document.body.parentNode.clientWidth;
            } else {
                window_width = document.body.parentNode.scrollWidth;
            }
        }
        var popUpDiv = document.getElementById(popUpDivVar);
        window_width=window_width/2-150;//150 is half popup's width
        popUpDiv.style.left = window_width + 'px';
    }
    function popup(windowname) {
        blanket_size(windowname);
        window_pos(windowname);
        toggle('blanket');
        toggle(windowname);
    }

    setInterval(function(){
        if($('#myDiv').hasClass('divClassRed')){
            $('#myDiv').addClass('divClassBlue').removeClass('divClassRed');

        }else{
                   $('#myDiv').addClass('divClassRed').removeClass('divClassBlue');
        }

    },1000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
    <p>trollface pic in here</p>
    <a href="#" onclick="popup('popUpDiv')">Click me to close</a>
</div>

<p>lorem ipsum is.. <a href="#" onclick="popup('popUpDiv')">a joke here</a></p>

<button href="#contact-info" id="contact-info-button">Contact Info</button>

<div id="contact-info" style="display: none;">
    <p>jon_do@example.com</p>
    <p>512-736-5555</p>
</div>

score 1 · Answer 3 · answered Feb 05 '17 at 09:06

Put all your scripts tag before end body tag and also wrap your codes in $(document).ready(), also there is a closing style tag in head, which was left unintentionally I guess.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Website</title>
</head>
<body>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
  <p>trollface pic in here</p>
  <a href="#" onclick="popup('popUpDiv')">Click me to close</a>
</div>

<p>lorem ipsum is.. <a href="#" onclick="popup('popUpDiv')">a joke here</a>
</p>

<button href="#contact-info" id="contact-info-button">Contact Info</button>

<div id="contact-info" style="display: none;">
  <p>jon_do@example.com</p>
  <p>512-736-5555</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script>  
  <script type="text/javascript">    
  $(document).ready(function(){
        $('#contact-info-button').click(function() {
      $('#contact-info').toggle();
    });

    function toggle(div_id) {
      var el = document.getElementById(div_id);
      if (el.style.display == 'none') {
        el.style.display = 'block';
      } else {
        el.style.display = 'none';
      }
    }

    function blanket_size(popUpDivVar) {
      if (typeof window.innerWidth != 'undefined') {
        viewportheight = window.innerHeight;
      } else {
        viewportheight = document.documentElement.clientHeight;
      }
      if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
        blanket_height = viewportheight;
      } else {
        if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
          blanket_height = document.body.parentNode.clientHeight;
        } else {
          blanket_height = document.body.parentNode.scrollHeight;
        }
      }
      var blanket = document.getElementById('blanket');
      blanket.style.height = blanket_height + 'px';
      var popUpDiv = document.getElementById(popUpDivVar);
      popUpDiv_height = blanket_height / 2 - 150; //150 is half popup's height
      popUpDiv.style.top = popUpDiv_height + 'px';
    }

    function window_pos(popUpDivVar) {
      if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerHeight;
      } else {
        viewportwidth = document.documentElement.clientHeight;
      }
      if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
        window_width = viewportwidth;
      } else {
        if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
          window_width = document.body.parentNode.clientWidth;
        } else {
          window_width = document.body.parentNode.scrollWidth;
        }
      }
      var popUpDiv = document.getElementById(popUpDivVar);
      window_width = window_width / 2 - 150; //150 is half popup's width
      popUpDiv.style.left = window_width + 'px';
    }

    function popup(windowname) {
      blanket_size(windowname);
      window_pos(windowname);
      toggle('blanket');
      toggle(windowname);
    }

    setInterval(function() {
      if ($('#myDiv').hasClass('divClassRed')) {
        $('#myDiv').addClass('divClassBlue').removeClass('divClassRed');

      } else {
        $('#myDiv').addClass('divClassRed').removeClass('divClassBlue');
      }

    }, 1000);

  });

  </script>  
</body>
</html>

jQuery toggle not working with lots of other JavaScript from an example nearby

3 Answers3