Dry jQuery for hiding and showing divs

Question

I am trying to figure out a way to dry up this code. I am trying to hide one div as another appears. I was thinking a for loop but can not figure out a way to hide as I toggle another in the same loop. Each div should hide separately, not all at once.

Thanks from a javaScript beginner.

 $( document ).ready(function() { $(".hide").hide(); $("#pic0").click(function(){ $("#text0").slideToggle("fast"); $("#pic0").hide(); }); $("#text0").click(function(){ $("#pic0").slideToggle("fast"); $("#text0").hide(); }); $("#pic1").click(function(){ $("#text1").slideToggle("fast"); $("#pic1").hide(); }); $("#text1").click(function(){ $("#pic1").slideToggle("fast"); $("#text1").hide(); }); $("#pic2").click(function(){ $("#text2").slideToggle("fast"); $("#pic2").hide(); }); $("#text2").click(function(){ $("#pic2").slideToggle("fast"); $("#text2").hide(); }); }); 

 .first { background-color: black; height: 300px; width: 300px; margin: 10px; } .hide { background-color: red; height: 300px; width: 300px; margin: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="first" id="pic0"></div> <div class="hide" id="text0"></div> <div class="first" id="pic1"></div> <div class="hide" id="text1"></div> <div class="first" id="pic2"></div> <div class="hide" id="text2"></div> 

Answer 1

Is this what you need? http://jsfiddle.net/ymayo1by/

$(document).ready(function () {

    $(".hide").hide();

    $(".first").click(function () {
        $(this).next('.hide').slideToggle('fast')
        .siblings('.hide:visible').slideUp('fast');
    });

});

EDIT: fixed toggle issue on the active item.

Answer 2

I don't know if you are doing this as an exercise to learn javascript or because you need it in a development project, but jQuery UI Accordion seems to achieve exactly what you describe.

Example : JSFIDDLE

  $(function() {
    $( "#accordion" ).accordion({
      collapsible: true
    });
  });

Answer 3

If you modify your HTML and group the sets like:

<div class="group">
    <div class="first pic" id="pic0"></div>
    <div class="hide text" id="text0"></div>
</div>

<div class="group">
    <div class="first pic" id="pic1"></div>
    <div class="hide text" id="text1"></div>
</div>

You can modify your javascript as:

$('.pic').on('click', function () {
    $(this).siblings('.text').slideToggle("fast");
    $(this).hide();
});

$(".text").click(function () {
    $(this).siblings('.pic').slideToggle("fast");
    $(this).hide();
});

here is a demo: http://jsfiddle.net/zz7mt93o/1/

Answer 4

First of all, you would have to improve your markup, such as group it to make it easier to deal with via JS/jQuery. I have come up with a dirty version which doesn't need you to change the markup. See if this works for you.

$(".hide").hide();
$("[id^='pic'], [id^='text']").click(function() {
    var id = this.id.slice(0, -1);
    var $which = id==="text" ? $(this).prev() : $(this).next();
    $(this).hide();
    $which.slideToggle("fast");
});

Demo@ Fiddle

Slightly improved version @ jsFiddle

Answer 5

This should do what you have requested:

jsFiddle Demo

$('div[id^="pic"]').click(function(){
    var num = this.id.slice(-1); //returns final char: 0, 1, 2, etc
    $('#text'+num).slideToggle('fast');
    $(this).hide();
});
$('div[id^="text"]').click(function(){
    var num = this.id.slice(-1); //returns final char: 0, 1, 2, etc
    $('#pic'+num).slideToggle('fast');
    $(this).hide();
});

You can avoid the annoying bouncing of the divs as they show/hide by (1) wrapping them in containing divs that (2) have a fixed height. See this slight modification to the previous jsFiddle

Notes:

1. We used the "starts with" css/jQuery selector to bind, for example, first click event to all DIVs whose ID begins with "pic"...

2. this.id (native javascript) is faster than using $(this) and results in identical value

3. We slice off the final character, stick into var num , and then use that to identify the correct text or pic div to toggle