显示另一个div时隐藏div

Question

I have 4 divs, two of them are shown on click (link), and hidden the same way. When I click the link for the other 2 divs, the first 2 should be hidden again and the other way around. Right now all 4 divs would be shown if the 2 links were clicked.

Easy: click link>show div; click second link>show second div while hiding fist div

The 2 links:

 <a class="show_hideAbout show_hideAboutArr" href="#" >About</a>

 <a class="show_hideContact show_hideContactArr" href="#" >Contact</a>

First 2 divs:

<div class="slidingDivAbout">Some Content</div>
<div class="slidingDivAboutArr">
  <img src="img/dropdownarrow.png" width="24" height="12" alt="">
</div>

Other 2 divs:

<div class="slidingDivContact">Some Content</div>
<div class="slidingDivContactArr">
  <img src="img/dropdownarrow.png" width="24" height="12" alt="">
</div>

And my script:

$(document).ready(function() {
  $(".slidingDivAbout").hide();
  $(".show_hideAbout").show();

  $('.show_hideAbout').click(function() {
    $(".slidingDivAbout").slideToggle(350);
  });

  $(".slidingDivAboutArr").hide();
  $(".show_hideAboutArr").show();

  $('.show_hideAboutArr').click(function() {
    $(".slidingDivAboutArr").fadeToggle("fast", "linear");
  });
  $(".slidingDivContact").hide();
  $(".show_hideContact").show();

  $('.show_hideContact').click(function() {
    $(".slidingDivContact").slideToggle(350);
  });

  $(".slidingDivContactArr").hide();
  $(".show_hideContactArr").show();

  $('.show_hideContactArr').click(function() {
    $(".slidingDivContactArr").fadeToggle("fast", "linear");
  });
});​

Answer 1

Without change your markup you can use this:

$(document).ready(function() {
    $(".slidingDivAbout, .slidingDivAboutArr, .slidingDivContact, .slidingDivContactArr").hide(0);

    $('.show_hideAbout').click(function() {
        $(".slidingDivContact").slideUp(300, function() {
            $(".slidingDivContactArr").fadeOut(300, function() {
                $(".slidingDivAbout").slideToggle(350, "linear", function() {
                    $(".slidingDivAboutArr").fadeToggle(350);
                });
            });
        });
    });
    $('.show_hideContact').click(function() {
        $(".slidingDivAbout").slideUp(300, function() {
            $(".slidingDivAboutArr").fadeOut(300, function() {
                $(".slidingDivContact").slideToggle(350, function() {
                    $(".slidingDivContactArr").fadeToggle(350, "linear");
                });
            });
        });
    });
});

Working Sample

Answer 2

Hi I would have done it like this jsfiddle example

HTML

<a class="show_hideAbout" href="#" >About</a>

<a class="show_hideContact" href="#" >Contact</a>
<div class="slidingDivAbout">Some Content1</div>
<div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
<div class="slidingDivContact">Some Content2</div>
<div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>​

script

$(function(){

         $('.slidingDivAbout').hide();
         $('.slidingDivAboutArr').hide();
         $('.slidingDivContact').hide();
         $('.slidingDivContactArr').hide();

         $('.show_hideAbout').click(function() {
            $('.slidingDivAbout').show(350);
            $('.slidingDivAboutArr').show()
            $('.slidingDivContact').hide();
            $('.slidingDivContactArr').hide();
        });

        $('.show_hideContact').click(function() {         
            $('.slidingDivContact').show(350);
            $('.slidingDivContactArr').show('fast', 'linear');
            $('.slidingDivAbout').hide();
            $('.slidingDivAboutArr').hide();
        });
});

Answer 3

Maybe try something like this?

<a class="show_hideAbout" href="#" >About</a>
<a class="show_hideContact" href="#" >Contact</a>

<div class="divAbout">
  <div class="slidingDivAbout">Some Content</div>
  <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>

<div class="divContact">
  <div class="slidingDivContact">Some Content</div>
  <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>

And the javascript:

$(document).ready(function() {

    $(".divAbout").hide();
    $(".divContact").hide();

    $('.show_hideAbout').click(function() {
        if( $(".divContact").is(":visible") ) {
          $(".divContact").slideToggle(350, 'linear', function(){
            $(".divAbout").slideToggle(350, 'linear');
          });
        } else {
          $(".divAbout").slideToggle(350, 'linear');
        }
    });

    $('.show_hideContact').click(function() {
        if( $(".divAbout").is(":visible") ) {
          $(".divAbout").slideToggle(350, 'linear', function(){
            $(".divContact").slideToggle(350, 'linear');
          });
        } else {
          $(".divContact").slideToggle(350, 'linear');
        }
    });

});​

Answer 4

for each link you should bind the click once.

<a class="show_hideAbout show_hideAboutArr" href="#" >About</a>
<a class="show_hideContact show_hideContactArr" href="#" >Contact</a>

the 2 following are duplicates since they bind the click to the same tag. class="show_hideAbout show_hideAboutArr")

$('.show_hideAbout').click(function(){
      $(".slidingDivAbout").slideToggle(350);
      });

$('.show_hideAboutArr').click(function(){
      $(".slidingDivAboutArr").fadeToggle("fast", "linear");
      });

keep only one. and

$('.show_hideAbout').click(function(){
    $(".slidingDivAbout").slideToggle(350);
    $(".slidingDivAboutArr").fadeToggle("fast", "linear");
});

Answer 5

I think it's better to do this with CSS classes rather than a load of hide/show methods. The HTML would look something like:

<a class="showAbout" href="#" >About</a>
<a class="showContact" href="#" >Contact</a>
<div id='wrapper'>
    <div class="about">
        <div class="slidingDivAbout">Some Content 1</div>
        <div class="slidingDivAboutArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
    </div>
    <div class="contact">
        <div class="slidingDivContact">Some Content 2</div>
        <div class="slidingDivContactArr"><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
    </div>
</div>

With two CSS rules:

#wrapper > div {
    display: none;
}
​#wrapper > div.show {
    display: block;
}​

And then the jQuery:

$(function() {

    $(document).on('click', '.showAbout', function() {
        $('.about').siblings('div').removeClass('show').end().toggleClass('show');
    });

    $(document).on('click', '.showContact', function() {
        $('.contact').siblings('div').removeClass('show').end().toggleClass('show');
    });

});​

Answer 6

I would use a custom attribute in your html tag:

Here's a working demo

HTML:

<a class="slidingLink" slide="about" href="#" >About</a>
<a class="slidingLink" slide="contact" href="#" >Contact</a>

<div class="slidingContainer" id="about">
    <div>Some Content</div>
    <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>
<div class="slidingContainer" id="contact">
    <div>Some Content</div>
    <div><img src="img/dropdownarrow.png" width="24" height="12" alt=""></div>
</div>​​​​​​​​​​​​​​​​

JavaScript:

$(document).ready(function(){
    $('.slidingContainer').hide();
    $('.slidingLink').click(function () {
        var toSlide = $(this).attr("slide");
        $("#"+toSlide).slideDown(350);
        $('.slidingContainer').each(function () {
            if ($(this).attr("id") != toSlide) {
                $(this).slideUp(350);
            }
        });
    });
});

This is absolutely generic, so all you have to do to add new links is add a new a tag with the slide attribute set to the id of a div with the class slidingContainer ​.