CODEWITHSUNDEEP
javascriptjquery
Rob
Rob

Reputation: 100

Show / Hiding Divs

After cobbling together a few questions I've managed to get this far to showing / hiding divs:

$(document).ready(function(){
 $('.box').hide();
  $('#categories').onMouseOver(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
 });
});

HTML:

<div id="categories">
 <div id="btn-top20"><a href="">Top 20 Villas</a></div>
 <div id="btn-villaspec"><a href="">Villa Specials</a></div>
 <div id="btn-staffpicks"><a href="">Our Staff Picks</a></div>
</div>

<div id="category-content">
 <div id="divarea1" class="box">
  Content 1
 </div>

 <div id="divarea2" class="box">
  Content 2
 </div>

 <div id="divarea3" class="box">
  Content 3
 </div>    
</div>

What am I missing?

Upvotes: 2

Views: 291

Answers (5)

Barrie Reader
Barrie Reader

Reputation: 10713

I know this has already had a decent answer and although this isn't jQuery/mooTools - I figured it was worth a mention:

Seven Ways To Hide An Element With Javascript: http://www.dustindiaz.com/seven-togglers/

:)

Upvotes: 0

Jeroen
Jeroen

Reputation: 1

I used this to toggle my divs:

html

<div class="content-item-news">..</div>
<div class="content-news-extra">...</div>

jquery

$(".content-item-news").click(function() {
     $(this).next(".content-news-extra").slideToggle(100);
});

Upvotes: 0

jholster
jholster

Reputation: 5136

Flexible, generic (and untested!) solution which works with any number of "tabbed" element groups. You just need to specify ".tab-handles a[href=#id_of_target_tab]" hierarchy. As a bonus, the selected tab is remembered between page loads.

$(function() {  // Shortcut for $(document).ready()

    $('.tab-handles a').mouseenter(function() {
        // Trigger custom event 'hide' for sibling handles.
        $(this).siblings().trigger('hide');
        // Show current tab.
        $($(this).attr('href')).show();
    }).bind('hide', function() {
        // Hide the corresponding tab on custom event 'hide'.
        $($(this).attr('href')).hide();
    }).each(function() {
        // Show tab if its id is found in url as an anchor (or hash).
        if (new RegExp($(this).attr('href') + '$')).test(window.location.href))
            $(this).trigger('mouseenter');
    });

})

Your page can contain any number of the following structure:

<ul class="tab-handles">
    <li><a href="#top-villas"></a></li>
    <li><a href="#villa-specials"></a></li>
</ul>

<div>
    <div id="top-villas"> Your tab content goes here. </div>
    <div id="villa-specials"> ... </div>
</div>

Upvotes: 1

Kzqai
Kzqai

Reputation: 23102

onMouseOver isn't a valid jquery method, among other things.

I really recommend browsing with google chrome when you're looking to debug javascript, it's error console is very useful for not just determining errors like this, but also for pinpointing the location in the script that is throwing the error, which might be an advantage beyond Firebug in firefox.

(And you can always run firebug lite as well via the bookmarklet even while using chrome, as the firebug lite website will show: http://getfirebug.com/firebuglite)

Upvotes: 0

Kobi
Kobi

Reputation: 138147

This will work:

 <div id="btn-top20" rel="area1"><a href="">Top 20 Villas</a></div>
 <div id="btn-villaspec" rel="area2"><a href="">Villa Specials</a></div>
 <div id="btn-staffpicks" rel="area3"><a href="">Our Staff Picks</a></div>

with this code:

$(document).ready(function(){
    $('.box').hide();
    $('#categories div').mouseenter(function() {
       $('.box').hide();
       $('#div' + $(this).attr('rel')).show();
    });
});

Corrections:

  • No such function onMouseHover.
  • Attached the event to every div, not the #categories parent, so this has the right context.
  • added rel for every div, because val is meaningless.

Working example: http://jsbin.com/ivuxo

You may also want to hide the div on mouse out, in wich case you can use hover:

$('#categories div').hover(
   function() { //hover in
      $('.box').hide();
      $('#div' + $(this).attr('rel')).show();
   }, function(){ //out
      $('.box').hide();
   });

Upvotes: 4

Related Questions