Show and Hide the content using a link

Question

I am trying to display a content DIV with a link of expand and collapse.

In my content DIV there is a unorder list. when the page is open I want to display only two list item with a expand link. If user need to view other list item they need to click on expand link. After expand the DIV link text must be change to Collapse. And also if in my unorder list have only 2 items then no need to display a link.

NOTE: unorder list is generating dynamically using PHP.

My HTML is something like this -

  <div id="mycontent">
    <ul>
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
    <p><a href="">+ View More</a><p>
  </div>

My Jquery -

$("a").click(function(){
    $("#mycontent").toggle();
}); 

This is my code so far - http://jsbin.com/mojuteve/1/edit

Can anybody tell me how can I do this?

Thank You.

Answer 1

$(function() {
    $("#mycontent li:gt(1)").hide(); // Initially show only first two items
    if ($("#mycontent li").length <= 2) {
        // Hide "View More" if there are no more to show
        $("#showmore").hide();
    }
    $("#showmore").click(function() {
        $("#mycontent li:hidden").slideDown();
        $("#showmore,#collapse").toggle();
        return false; // Prevent following the link
    });
    $("#collapse").click(function() {
        $("#mycontent li:gt(1)").slideUp();
        $("#showmore,#collapse").toggle();
        return false; // Prevent following the link
    });
});

Use the following HTML:

  <div id="mycontent">
    <ul>
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>      
      <li>Lorem ipsum dolor sit amet</li>
    </ul>
    <p><a id="showmore" href="#">+ View More</a>
       <a id="collapse" href="#">- Collapse</a><p>
  </div>

And CSS:

#collapse {
    display:none;
}

Answer 2

How about this:

CSS:

#mycontent {
    background: #fff;
    overflow: hidden;
}
#mycontent > ul {
    display: block;
    width: 400px;
}
#mycontent > ul > li {
    display: inline-block;
    padding: 0 20px 10px 0;
}
#mycontent > ul > li + li + li {
    display: none;
}
#mycontent p {
    float: right;
    padding: 0 20px;
}
#mycontent.visible ul > li {
    display: inline-block;
}

jQuery:

//Check if the list items are less than 3 and if so remove the more link
(function () {
    var listLenght = $('#mycontent ul li').length;
    if (listLenght < 3) {
        $('#mycontent a').remove(); 
    }
})();

//Variable for the text change
var linkText = ['+ View More', '- Collapse'];

$('a').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    // Better practice to toggle classes instead of using show/hide
    $('#mycontent').toggleClass('visible'); 
    //Text Change
    if($this.text() === linkText[0]){
        $this.text(linkText[1]);
    }else{
        $this.text(linkText[0]);
    }
})

But checking if the list length is 2 or less will be better to be done with php not js.

Demo

Answer 3

Try this fiddle: http://jsfiddle.net/Bn92C/2/

The code you should use, it will toggle the text within the "a"

$(function(){
    $(".mycontent").hide();
    $("a").click(function(){
        $(".mycontent").slideToggle("fast");
        $(this).toggleClass("more");
        if($("a").hasClass("more")) {
            $("a").text("- View Less");
        } else {
            $("a").text("+ View More");
        }
    });
});