jQuery slide toggle...

Report · Nov 09, 2016

Hi,

I applied this technique to some content on a page. However, I then applied the same tags to a secondary chunk of content and it won't fire.

I thought maybe having a clear fix between the first & second instance of the content might do the trick, but it made no difference. Also made sure the openings & closings were distinctly repeated between these two content areas.

Without having to do a work around such as renaming the div and making it unique to each content block... what should I do? Surely, it cannot only fire once per page (one instance).

Tryit Editor v3.1 *this is the one I applied

and all the other info here:

jQuery Effects - Sliding

Thank you!

Report · Nov 09, 2016

<!DOCTYPE html>

<html>

<head>

$(document).ready(function(){

var hidePanels = $(".panel").hide();

$(".flip").click(function(){

hidePanels.slideUp();

$(this).next(".panel").slideToggle();

});

</script>

<style>

.panel, .flip {

padding: 5px;

text-align: center;

background-color: #e5eecc;

border: solid 1px #c3c3c3;

}

.panel {

padding: 50px;

display: none;

}

</style>

</head>

<body>

<div class="flip">Trigger 1</div>

<div class="panel">Panel 1</div>

<div class="flip">Trigger 2</div>

<div class="panel">Panel 2</div>

<div class="flip">Trigger 3</div>

<div class="panel">Panel 3</div>

</body>

</html>

Report · Nov 10, 2016

Still having trouble - do I have to switch to a custom class instead of an ID? Is that the trouble why these won't roll out independent of each other? The first instance works... the second won't roll out. Thank you.

<div id="flip">Introductory sentence or two . . . Read More +</div>

<div id="panel">Long paragraph here. Multiple sentences.

<h3>— <em>Credit Line Here</em></h3>

</div>

<br>

<div id="flip">Long sentence or two here. . . Read More +</div>

<div id="panel">Lengthy paragraph here. Multiple sentences.

<h3>— <em>Credit Line Here</em></h3>

</div>

$(document).ready(function(){

var hidePanels = $(".panel").hide();

$("#flip").click(function(){

hidePanels.slideUp();

$(this).next("#panel").slideToggle("slow");

});

</script>

------------------------------------

THE CSS...

#panel, #flip {

color: #666666;

font-style: italic;

background-color: rgba(192,192,192,0.1);

opacity: 2;

padding: 30px 30px 30px 30px;

}

#panel {

display: none;

padding: 1px 30px 30px 30px;

}

Report · Nov 11, 2016

Dont use ids. You need to use classes as my code showed.

Report · Nov 21, 2016

I did, and it works! thanks!

One more issue: when clicking on the second instance, it sends me further down the page so I need to scroll back up a little to actually read the content in the second instance block - rather than it just revealing the content within the secondary block. So it's slightly buggy.

Not sure what I would need to alter here.

$(document).ready(function(){

var hidePanels = $(".panel").hide();

$(".flip").click(function(){

hidePanels.slideUp();

$(this).next(".panel").slideToggle("slow");

});

</script>

Thank you.

Report · Nov 21, 2016

Tray adding return false; as below:

$(document).ready(function(){

var hidePanels = $(".panel").hide();

$(".flip").click(function(){

hidePanels.slideUp();

$(this).next(".panel").slideToggle();

return false;

});

</script>

or another way add the 'event' handler:

$(document).ready(function(e){

var hidePanels = $(".panel").hide();

$(".flip").click(function(){

hidePanels.slideUp();

$(this).next(".panel").slideToggle();

e.preventDefault();

});

</script>

Report · Nov 23, 2016

Hi,

I have tried both of these modifications but the second one still auto scrolls up so bottom of content container displays on screen, and you only see the last 3 lines vs. the entire paragraph (the beginning of the paragraph - in this content block - is up, off screen). Not sure why it is sliding like that too far.

Another important observation. If I click to expand the second instance first... this issue does not occur. It is only when I first open the first instance, and then click the second instance.

This 'module' happens to toggle between both content blocks - meaning when one is open, the other automatically collapses.

I think that is what is posing the challenge of this behavior.

Any other ideas?

Report · Nov 23, 2016

It sounds like you are trying to use an awful lot of content in the blocks, which a sliding panel is not really meant for - does it do this if you use less content?

Maybe just remove the hide sliding panels code:

hidePanels.slideUp();

Report · Nov 23, 2016

You are right - it is a lot of text within, they are testimonials. This is the cleanest method to present 'invitingly' to user, but not clutter up the page and create a scrolling fest.

*YES! removing the hidePanels line did it! Perfect!

Thank you!

jQuery slide toggle...

1 Correct answer

Photos