Display and conceal the information with a hyperlink

Question

Display and conceal the information with a hyperlink

I need to create a content DIV that includes a link to expand and collapse it.

Within this content DIV, there is an unordered list. Initially, only two list items should be displayed with an expand link. If users want to see additional list items, they must click on the expand link. Once expanded, the link text should change to Collapse. Additionally, if the unordered list only contains two items, the link should not be displayed.

NOTE: The unordered list is generated dynamically using PHP.

Here is an example of my HTML structure -

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

This is the JQuery code I have implemented -

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

You can view the current state of my code here: http://jsbin.com/mojuteve/1/edit

If you have any suggestions on how to improve this functionality, please let me know.

Thank you!

javascript jquery css

Answer 1

Answer №1

$(function() {
    $("#mycontent li:gt(1)").hide(); 
    if ($("#mycontent li").length <= 2) {
        $("#showmore").hide();
    }
    $("#showmore").click(function() {
        $("#mycontent li:hidden").slideDown();
        $("#showmore,#collapse").toggle();
        return false; 
    });
    $("#collapse").click(function() {
        $("#mycontent li:gt(1)").slideUp();
        $("#showmore,#collapse").toggle();
        return false; 
    });
});

Use the given 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 add the following CSS:

#collapse {
    display:none;
}

Answer 2

$(function() {
    $("#mycontent li:gt(1)").hide(); 
    if ($("#mycontent li").length <= 2) {
        $("#showmore").hide();
    }
    $("#showmore").click(function() {
        $("#mycontent li:hidden").slideDown();
        $("#showmore,#collapse").toggle();
        return false; 
    });
    $("#collapse").click(function() {
        $("#mycontent li:gt(1)").slideUp();
        $("#showmore,#collapse").toggle();
        return false; 
    });
});

Use the given 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 add the following CSS:

#collapse {
    display:none;
}

Answer 3

Answer №2

Check out this code snippet: http://jsfiddle.net/Abc123/4/

This script will help you toggle the text inside the "a" tag

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

Answer 4

Check out this code snippet: http://jsfiddle.net/Abc123/4/

This script will help you toggle the text inside the "a" tag

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

Answer 5

Answer №3

How about trying this out:

CSS:

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

jQuery:

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

//Array for text toggle
var linkText = ['+ View More', '- Collapse'];

$('a').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    $('#content').toggleClass('show'); 
    //Text change
    if($this.text() === linkText[0]){
        $this.text(linkText[1]);
    }else{
        $this.text(linkText[0]);
    }
})

Checking list length with PHP instead of JS when less than 3 would be more efficient.

Demo

Answer 6

How about trying this out:

CSS:

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

jQuery:

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

//Array for text toggle
var linkText = ['+ View More', '- Collapse'];

$('a').on('click', function (e) {
    e.preventDefault();
    var $this = $(this);
    $('#content').toggleClass('show'); 
    //Text change
    if($this.text() === linkText[0]){
        $this.text(linkText[1]);
    }else{
        $this.text(linkText[0]);
    }
})

Checking list length with PHP instead of JS when less than 3 would be more efficient.

Demo

Display and conceal the information with a hyperlink

Answer №1

Answer №2

Answer №3

Similar questions

Keep the button in a single color unless it is being hovered over

Retrieve data using ajax within an mvc framework

How come my donut graphs are sitting outside the box while all other types of charts are properly aligned?

Creating a div overlay triggered by the addition of a child tag

Avoiding duplicate touch events with an if statement

Angular's method of one-way binding to an object

"The space between the header-main section and the main-footer section is pure white

A guide on enhancing Autocomplete Tag-it plugin with custom tags

Using Angular directives to dynamically add event listeners with the ng-repeat directive

Conditionally displaying an input model in Vue.js using v-if

Elevate your designs with Bootstrap Cards featuring a clickable link. Give your

The replacement of classes in ReactJS using JavaScript seems to be malfunctioning

Using AJAX to dynamically load an image by setting the image path as the source of the image tag

How come submitting a form without refreshing does not update the database with new values?

Display the accurate prompt in the event of 2 `catch` statements

Troubleshooting a simple test issue with React AXIOS post in an Express environment

Stylish Radial Hover Effect for Images Using CSS

Create an interactive table in your WordPress website that adjusts to different screen sizes

Leveraging the ng-hide property of one controller to adjust the ng-style attribute of another controller through a centralized global controller

What is the best way to navigate my Page while my Dialog Component is displayed?