CODEWITHSUNDEEP
javascriptjquery
user3584175
user3584175

Reputation: 1

Uncaught TypeError: Cannot read property 'height' of undefined

I have a problem with opening/closing boxes. Scenario suppose work like this: If one box is opened, when user clicks on some another, opened box should be closed and clicked one should be opened. When link(box) is opened, in

  • tag should be inserted class="active" and when box is closed this class should be removed. Now user can open all boxes and all stay opened until user clicks on them again to close them. Alos with current code when user open more than two boxes all boxes opened after these two won't get "active" class. I'm getting this error message "Uncaught TypeError: Cannot read property 'height' of undefined ". May anyone help me to solve this? This is code

    $(document).ready(onReady);

function onReady(){
$(".glossary").each(init);
}

var init=function(){var rootElement=this;
$("ul li:odd", rootElement).addClass("odd");
$("ul li:even", rootElement).addClass("even"); 
$(rootElement).delegate("ul li a", "click", function(e){
toggleItem($(this).next("div"), $("ul li div", rootElement));
})
}

 var toggleItem =function (item, set){
    if ($(item).hasClass("active")){
      deactivateItem(item);
    }
   else{
      activateItem(item, set);
    }
  }

  var activateItem = function(item, set){

  $(item).slideDown();
    $(set).filter(".active").each(deactivateItem);
    $(item).addClass("active");
  }

   var deactivateItem = function (item){
  $(item).slideUp();
    $(item).removeClass("active");
  }

    and this is some HTML code

    <!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="test1.js"></script>
</head>
<body>
<div class="glossary">
<ul>

        <li >
          <a href="#">Rose</a>
          <div class="" style="display: none;">A rose is a woody perennial of the genus Rosa, within the family Rosaceae. There are over 100 species.</div>
        </li>

        <li >
          <a href="#">Camomile</a>
          <div class="" style="display: none;">Chamomile or camomile  is the common name for several daisy-like plants of the family Asteraceae that are commonly used to make a herb infusion that can help to induce sleep</div>
        </li>

        <li >
          <a href="#">Mentha</a>
          <div class="" style="display: none;">Mentha is a genus of plants in the family Lamiaceae (mint family).The species are not clearly distinct and estimates of the number of species varies from 13 to 18.</div>
        </li>

        <li >
          <a href="#">Viola</a>
          <div class="" style="display: none; overflow: hidden;">Viola  is a genus of flowering plants in the violet family Violaceae. It is the largest genus in the family, containing between 525 and 600 species.</div>
        </li>

      </ul>
</div>
</body>
</html>

    Upvotes: 0

    Views: 7180

    • Answers (1)

    Ben
    Ben

    Reputation: 494

    The problem is a jQuery object is not being passed to the deactivateItem function.

    jQuery each passes the jQuery selection via this. Your function deactivateItem expects the jQuery selection to be passed in as the first argument item. The call to each in activateItem is not accounting for this.

    This is the problematic line:

    $(set).filter(".active").each(deactivateItem);

    You likely want to change it to something like:

    $(set).filter(".active").each(function() {
    deactivateItem(this);
});

    Upvotes: 1

    Related Questions