How to create a expandable link list on blogger?


#1

I have a blog having too long link list.

It’s making my blog look unprofessional. I want to make this link list expandable. Like , the list in default should show only half list or the only list i want to show and at bottom there should be a link (show more or anything) , when someone click on it then it should show full link list.

Hope it’s understandable :smile:

So anybody know the way, then please share here :smile:


#2

Hello @shahsantosh I Understand your problem so i google it and found an answer for you just follow these steps-

1.Open Your List HTML Or Widget. 2. Above <head> Paste The Following Code-

<script type="text/javascript">
function swap(targetId){
  if (document.getElementById){
        target = document.getElementById(targetId);
            if (target.style.display == "none"){
                target.style.display = "";
            } else{
                target.style.display = "none";
            }
                
  }
}
</script>

This Code Will Add A collapsible/expandable list style.

  1. Select An Place To Create A Expandable Link Just After It Paste The Following Code-

                 <a href="#" onclick="swap('sectionThreeLinks');return false;">Load More</a>
             <ul id="sectionThreeLinks" style="display: none;">
               <li><a href="#">More Link</a></li>
               <li><a href="#"></a>More Link</li>
               <li><a href="#">More Link</a></li>
               <li><a href="#">More Link</a></li>
             </ul>
    

Repeat The Code <li><a href="#">More Link</a></li> To Create More Link.

Hope This Will Work.


#3

@ngtechzone you mean that i need to add a list manually, that i want to show after clicking on Load More? Can’t it be done automatically?


#4

Here’s A Short Trick-

If You Have Already Create A List ( <ol> or <ul>) .

Paste This Script Below <head>

<script type="text/javascript">
function swap(targetId){
  if (document.getElementById){
        target = document.getElementById(targetId);
            if (target.style.display == "none"){
                target.style.display = "";
            } else{
                target.style.display = "none";
            }

  }
}
</script>

Now Where You Want To Show Load More just add-

<a href="#" onclick="swap('sectionThreeLinks');return false;">Load More</a>

So There Is No Need To Create List Again.

Hope This Will Work