Skip to main content
R
r_tist
Inspiring
November 10, 2016
Answered

jQuery slide toggle...

  • November 10, 2016
  • 3 replies
  • 2161 views

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!

    This topic has been closed for replies.
    Correct answer osgood_

    <!DOCTYPE html>

    <html>

    <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script>

    $(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>

    3 replies

    R
    r_tistAuthor
    Inspiring
    November 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!

    R
    r_tistAuthor
    Inspiring
    November 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?

    O
    osgood_
    Legend
    November 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();

    O
    osgood_Correct answer
    Legend
    November 10, 2016

    <!DOCTYPE html>

    <html>

    <head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script>

    $(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>

    R
    r_tistAuthor
    Inspiring
    November 11, 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>&#8212; <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>&#8212; <em>Credit Line Here</em></h3>

              </div>

    <script>

    $(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;

    }

    O
    osgood_
    Legend
    November 11, 2016

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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices