0

Alright, this has been driving me insane for all too long. I'm trying to toggle a div, but start it in a hidden state. Suggestions on how to modify the following?

// Drupal 7 js code
(function ($) {
Drupal.behaviors.togg = {
attach: function (context, settings) {
$('a#togg-link:not(.togg-processed)', context).addClass('togg-            
processed').each(function() {
$(this).click(function() {
$("div#togg").toggle(400);
return false;
});
});
}
};
})(jQuery);
  • Welcome to Drupal Answers :) Per the FAQ questions that aren't about Drupal specifically are off-topic here. Since this is solely a javascript question I'm going to close it – Clive Feb 13 '13 at 10:08
  • Isn't attaching jQuery to a Drupal function qualify as a Drupal question? – Stephen P. Feb 14 '13 at 2:57
0

If possible, simply add the CSS class js-hide to the div source markup, to hide by default if js is enabled.

  • Thanks, figured this out almost immediately after posting but couldn't post a follow up due to my 8 hour restriction :-/ thanks though David! – Stephen P. Feb 14 '13 at 3:00
0

Try this - In your loop, where you are iterating over each element to attach a click event handler, add this line:

$(this).hide();

That should hide each element. But don't add it to your click event handler. You can also initially hide the element using CSS if you want. Either method should work.

Please consider properly formatting code samples you post so that the community can read and understand it easier.

Good Luck!

  • Hey, tried this before but it was preventing the menu in the div from expanding. Thanks though! – Stephen P. Feb 14 '13 at 2:58
0
// Drupal 7 js code
(function ($) {
  Drupal.behaviors.togg = {
    attach: function (context, settings) {
      $('a#togg-link', context).once().each(function() {
        $(this).hide().click(function() {
          $('div#togg').toggle(400);
          return false;
        });
      });
    }
  };
})(jQuery);

Are there going to be more than 1 toggle link on the page? If no, you don't need the each(). Otherwise, if each toggle link opens a different div, than the selector in $('div#togg').toggle(400); will have to be changed.

There is also the option of just settings display:none in the css to hide them when the page loads.

Not the answer you're looking for? Browse other questions tagged or ask your own question.