Quote Expander / Collapse - By Technidev
 

Mark as installed = get support.

If you're tired of people quoting long posts and having to scroll past it, then this modification is definitely something you want to use.

This template modification will make it possible to resize quote containers and add an "Expand" button to it which can be clicked to view the whole quote.

This modification should work on pretty much all vBulletin 4 versions.

Installation

1. Open the "showthread" template and paste the following above </body>
   
   HTML Code:

   ---

   <script>window.jQuery||document.write(unescape("%3Cscript src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js' type='text/javascript'%3E%3C/script%3E"));</script>
<script>
$(function(){
  $(".quote_container").each(function(index){
      if($(this).height() > 250){
        $(this).css({
            'height': '250px',
            'overflow': 'hidden'
        });

        $(this).parent().append('<div class="quote_expander"><a href="">Expand</a></div>');
      }
  });

  $(".quote_expander").click(function(){
      $(this).parent().find('.quote_container').css({'height': 'initial', 'overflow': 'initial'});
      $(this).remove();
      return false;
  });
});
</script>

   ---

2. Now open the additional.css template under "CSS Templates" and add the following:
   
   HTML Code:

   ---

   .quote_expander{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 11px;
  text-align: center;
  color: rgb(63, 63, 63);
  cursor: pointer;
  padding-top: 65px;
  background: -webkit-linear-gradient(top, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%);
  background: -moz-linear-gradient(top, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%);
  background: -o-linear-gradient(top, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%);
  background: linear-gradient(to bottom, rgba(45, 45, 45, 0) 0%, #C2CAD2 80%);
  width: 100%;
  position: absolute;
  bottom: 0;
}

   ---

3. Done.

How to change the height of when the quote should be resized?
Change the 2 occurences of the number "250" in the showthread template to whatever height you want.

How to change the background color of the expander?
Change all occurences of the color "#C2CAD2" in the additional.css template to the hex code of the color you want.

Screenshots
https://vborg.vbsupport.ru/external/2016/02/15.png

Nice work, Dave! :)

I had to do something similar at the site I help admin (we have many users who will lazily quote an entire huge post to address one point), but I had to also account for LaTeX by MathJax making quotes grow after the DOM was in place. Fortunately they provide a script queue that will allow javascript to execute only after the LaTeX is done rendering.

Yeah I'm surprised vBulletin didn't create something like this themselves and that no one else released something like this before. Long quotes are the most annoying thing on forum boards.

Only thing I would add, if it is possible, that users choose if they want their quotes expanded or collapsed.

very nice, looks like xenforo :)

Yep, that's where I got the idea from.

Installed & Thanks! :cool:

it's very nice, and working in 4.2.3 PL2
wish you could make this into a plugin for easy install
wish also you could re-collapse after expansion
it can be improved but very useful nonetheless

Not work on 4.2.3 version, mesage not expand. When I press Expand button no any action. Can you check this problem ? Is it possible to make expand and collapse again function ?

Works nicely on Avenger Fluid also on 4.2.5.