Show Hide Functionality

Question

I have the following button:

<a href="#" class="see-more">See more <i class="fa fa-chevron-right"></i></a>

When clicked it will toggle a div for show/hide effect. Got that part working okay. However, I realized I'm going to need this on multiple buttons. I believe I need to refactor my current code to be a function, but I'm not too sure where to go from here.

This is what I started with:

// Slide toggle content
$(".see-more").click(function(e){
  e.preventDefault();

  $(".show-more").slideToggle('slow');

  if($(this).html() == 'See less <i class="fa fa-chevron-right"></i>') {
    $(this).html('See more <i class="fa fa-chevron-right"></i>');
  } else {
     $(this).html('See less <i class="fa fa-chevron-right"></i>');
  }
});

My first attempt didn't yield much luck

var seeMore = $('.see-more');

function showHide() {

    this.preventDefault();

    $(".show-more").slideToggle('slow');

    if($(this).html() == 'See less <i class="fa fa-chevron-right"></i>') {
      $(this).html('See more <i class="fa fa-chevron-right"></i>');
    } else {
      $(this).html('See less <i class="fa fa-chevron-right"></i>');
    }
}

seeMore.click(showHide);

EDIT: Adding more code for reference on how this is working (or should work)

    <!-- Agenda Module -->
            <div class="row module">
              <div class="small-12 columns">
                <div class="radius bordered">
                  <img src="path-to-image" alt="">
                  <div class="module-content">
                    <h2>Agenda</h2>
                    <ul class="no-bullet agenda-list">
                      <li class="agenda-date">Friday 11th September</li>
                      <li><span class="agenda-time">19.00</span>Welcome Party</li>
                    </ul>
                    <ul class="no-bullet agenda-list">
                      <li class="agenda-date">Saturday 12th September</li>
                      <li><span class="agenda-time">09.45</span>Brunch</li>
                      <div class="show-more agenda-show">
                      <li><span class="agenda-time">10.10</span>Meet the players</li>
                      <li><span class="agenda-time">10.30</span>Driving range and puttin tuition</li>
                      <li><span class="agenda-time">11.30</span>Tee-Off</li>
                      <li><span class="agenda-time">13.15</span>Lunch at the Club house</li>
                      <li><span class="agenda-time">17.00</span>End of play</li>
                      <li><span class="agenda-time">19.30</span>Drinks reception</li>
                      <li><span class="agenda-time">21.30</span>Guest speaker</li>
                      </div>
                    </ul>
                  </div>
                  <a href="#" class="see-more show-for-small">See more <i class="fa fa-chevron-right"></i></a>
                </div>
              </div>
            </div>
            <!-- END Agenda Module -->

Additional example (In this example I would be adding more rows that are hide/show -- currently not there in my code, adding for reference)

<li>
                <div class="radius bordered">
                  <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{ab3c73da-3765-4fc5-abac-b2a9db4db779}_mod-banner-contact.png" alt="">
                  <div class="module-content">
                    <h2>Get in touch</h2>
                    <div class="row mar-bot-15">
                      <div class="small-12 columns">
                        <p>Contact us to find out more about this or any other events that Vodafone organise:</p>
                      </div>
                    </div>
                    <div class="row collapse mar-bot-15">
                      <div class="small-3 columns text-center">
                        <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{76cda4ed-0939-4509-bda4-10fa7307a2cf}_icn-mail.png" alt="" />
                      </div>
                      <div class="small-9 columns">
                        <p><strong>events@vodafone.co.uk</strong></p>
                      </div>
                    </div>
                    <div class="row collapse mar-bot-15">
                      <div class="small-3 columns text-center">
                        <img src="http://images.response.vodafoneglobalenterprise.com/EloquaImages/clients/VodafoneGroupPLC/{b8c7c4b3-9ab4-4b86-add3-c0c5b936ae41}_icn-phone.png" alt="">
                      </div>
                      <div class="small-9 columns">
                        <p><strong>+44 (0)1635 33251</strong></p>
                      </div>
                    </div>
                  </div>

                  <div class="show-more">
                    <!-- hide / show content here-->
                  </div>
                  <a href="#" class="see-more">See more <i class="fa fa-chevron-right"></i></a>
                </div>
              </li>

I can see how one of the answers would work in this example .. I will try to restructure the original HTML ... the agenda module is different, slightly, than the other modules. The "show more >" link will only show up on mobile for that example.

Answer 1

You can slightly restructure your HTML, and then use .prev() to find the closest DIV to the clicked button.

jsFiddle Demo

Note that SlideToggle will work great when you only have a single expanding DIV to keep track of. Once you have multiple DIVs, any of which can be expanded/contracted, you should explicitly specify the slideUp / slideDown functions.

 $(".see-more").click(function(e){ e.preventDefault(); if($(this).html() == 'See less <i class="fa fa-chevron-right"></i>') { $(this).html('See more <i class="fa fa-chevron-right"></i>'); $(this).prev(".show-more").slideUp('slow'); } else { $(this).html('See less <i class="fa fa-chevron-right"></i>'); $(this).prev(".show-more").slideDown('slow'); } }); 

 .show-more{display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Agenda Module --> <div class="row module"> <div class="small-12 columns"> <div class="radius bordered"> <img src="path-to-image" alt=""> <div class="module-content"> <h2>Agenda</h2> <ul class="no-bullet agenda-list"> <li class="agenda-date">Friday 11th September</li> <li><span class="agenda-time">19.00</span>Welcome Party</li> </ul> <ul class="no-bullet agenda-list"> <li class="agenda-date">Saturday 12th September</li> <li><span class="agenda-time">09.45</span>Brunch</li> <div class="show-more agenda-show"> <li><span class="agenda-time">10.10</span>Meet the players</li> <li><span class="agenda-time">10.30</span>Driving range and puttin tuition</li> <li><span class="agenda-time">11.30</span>Tee-Off</li> <li><span class="agenda-time">13.15</span>Lunch at the Club house</li> <li><span class="agenda-time">17.00</span>End of play</li> <li><span class="agenda-time">19.30</span>Drinks reception</li> <li><span class="agenda-time">21.30</span>Guest speaker</li> </div> <a href="#" class="see-more show-for-small">See more <i class="fa fa-chevron-right"></i></a> </ul> <ul class="no-bullet agenda-list"> <li class="agenda-date">Sunday 13th September</li> <li><span class="agenda-time">08.30</span>Breakfast</li> <div class="show-more agenda-show"> <li><span class="agenda-time">10.30</span>Meet at Lobby for Bus</li> <li><span class="agenda-time">11.00</span>Church service</li> <li><span class="agenda-time">12.30</span>Bus leaves church</li> <li><span class="agenda-time">13.15</span>Lunch at the Club house</li> <li><span class="agenda-time">17.00</span>Dinner at the Club house</li> <li><span class="agenda-time">19.00</span>Free Evening</li> </div> <a href="#" class="see-more show-for-small">See more <i class="fa fa-chevron-right"></i></a> </ul> </div> </div> </div> </div> <!-- END Agenda Module --> 

Answer 2

I don't think you need to refactor your code to a function.

You can still use:

$(".see-more").on('click', function(e){
  e.preventDefault();

  if($(this).hasClass(".show-more")) {
    $(this).slideToggle('slow');
  }

  if($(this).html() == 'See less <i class="fa fa-chevron-right"></i>') {
    $(this).html('See more <i class="fa fa-chevron-right"></i>');
  } else {
    $(this).html('See less <i class="fa fa-chevron-right"></i>');
  }
});