2

Relating to the answer provided in this question: How to slide down a div then .fadeIn() the content and vice versa?

I the js fiddle provided has the jquery specifically for one of the divs. If I have multiple divs, how do I adapts the jquery code to be called on which ever div is clicked? I have adapted the code, but it does not work:

<a href="#" onclick="toggleSlider();">toggle</a>
<div id="panelThatSlides" style="display:none;background:#eee;padding:10px;">
    <div id="content1Fades" style="opacity:0;filter:alpha(opacity=0);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
    </div>
</div>
<p></p>
<a href="#" onclick="toggleSlider();">toggle2</a>
<div class="panelThatSlides2" style="display:none;background:#eee;padding:10px;">
    <div id="content2Fades" style="opacity:0;filter:alpha(opacity=0);">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
    </div>
</div>
<p>HELLO WORLD</p>

The jquery, I think I am using the jquery to identify the "contentthatfades portion wrong:

function toggleSlider() {
    if ($("#"+ this.id).is(":visible")) {
        $("#content"+this.id+"Fades").animate(
            {
                opacity: "0"
            },
            600,
            function(){
                $("#"+ this.id).slideUp();
            }
        );
    }
    else {
        $("#"+ this.id).slideDown(600, function(){
            $("#content"+this.id+"Fades").animate(
                {
                    opacity: "1"
                },
                600
            );
        });
    }   
}
Community
  • 1
  • 1
user2883071
  • 960
  • 1
  • 20
  • 50

1 Answers1

2

Change html like this:-

<a href="#" onclick="toggleSlider(this);">toggle</a>
<div id="panelThatSlides" style="display:none;background:#eee;padding:10px;">
<div id="content1Fades" style="opacity:0;filter:alpha(opacity=0);">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
    </div>
 </div>
  <p></p>
   <a href="#" onclick="toggleSlider(this);">toggle2</a>
    <div class="panelThatSlides2" style="display:none;background:#eee;padding:10px;">
    <div id="content2Fades" style="opacity:0;filter:alpha(opacity=0);">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut tortor  erat, et consectetur nisl.
</div>

HELLO WORLD

and then jquery function:-

   function toggleSlider(el) {
        var dv = $(el).next('div');
        if (dv.is(":visible")) {
           dv.animate(
                {
                    opacity: "0"
                },
                600,
                function () {
                    dv.slideUp();
                }
            );
        }
        else {
            dv.slideDown(600, function () {
                dv.animate(
                    {
                        opacity: "1"
                    },
                    600
                );
            });
        }
    }

Demo

Umesh Sehta
  • 10,555
  • 5
  • 39
  • 68
  • I see that you are identifying the next div and sliding that up and down. Is it possible to do this using something like regular expressions? This works for now, but if I do happen to insert a div in between the 2 divs, it will break. Even something similar to `next div that begins with 'bodycontent-'` – user2883071 May 16 '15 at 06:08
  • You can add class to next div and can check ` var dv = $(el).next('.className');` – Umesh Sehta May 16 '15 at 06:11
  • Mohit, inside the 2nd parent div, how come `class="panelThatSlides2 slide"` works, but when i change it to `class="panelThatSlides2" class="slide"` it does not work? – user2883071 May 16 '15 at 06:24
  • bacuse div can have only single `class` attribute and you can pass multiple classes seprate by space now you are passing two class attributes so its simple ignoring that one – Umesh Sehta May 16 '15 at 06:25
  • Yes, this works. Thank you. Added `event.preventDefault()` to prevent it from scrolling to the top of the page – user2883071 May 16 '15 at 07:13
  • yes you can also change `href="#"` to `href="javascript:;"` for that purpose – Umesh Sehta May 16 '15 at 07:15