• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 410
  • Last Modified:

Show & Hide Question

Hi Guys,

I have yet another question I hope can be solved as I think it's pretty tricky.

Lets say I have a query that retrieves 49 names. However, I would like only to show the first 20 names, but hide the rest. After name number 20, I would just show a few dots followed by a phrase 'Click to show all'.

<cfquery datasource="#APPLICATION.data#" name="getnames">
Select *
FROM tNames
</cfquery>

When the user clicks on the link 'Click here to see all', all the names would than be 'expanded' and displayed.

I really hope someone would be able to show me how this solution can be achieved. Thanks so very much!

I attached a picture of what I am hoping to accomplish below:


What I am trying to achieve
0
CFbubu
Asked:
CFbubu
  • 3
  • 3
  • 3
  • +2
2 Solutions
 
lwadwellCommented:
This is possibly not quite what you are looking for ... but this is a JavaScript/jQuery method:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
        var namelist = $("#names>p").html();
        if ( namelist.length > 140 ) {
            var split  = namelist.indexOf(',',140)+1;
            var names1 = namelist.substring(0,split);
            var names2 = namelist.substring(split);
            var newInner = names1 + '<span class="clickme">....Click here to see all</span><span class="clickme"  style="display: none; ">'+names2+"</span>";
            $("#names>p").html(newInner);
            $('.clickme').click(function() {
                $('.clickme').toggle();
            });
        }
	});
</script>
</head>
<body>
    <h3>Name</h3>
    <div id="names">
        <p>name1, name2, name3, name4, name5, name6, name7, name8, name9, name10, name11, name12, name13, name14, name15, name16, name17, name18, name19, name20, name21, name22, name23, name24, name25, name26, name27, name28, name29, name30, name31, name32, name33, name34, name35, name36, name37, name38, name39, name40, name41, name42, name43, name44, name45, name46, name47, name48, name49</p>
    </div>

Open in new window

0
 
Pravin AsarCommented:
To get the same effect, one could use css, and just a little bit of javascript.

Try out the code.
As  good UI design practice, I would put the "Click ..." action tag over the list.
{Reason.. if the list if too long , user has to scroll all theway to bottom to collapse the list}




<html>
      <style type="text/css">
            div { padding:10px; font-size: 24px;}
            div.collapsed {
                  width: 600px; height: 50px;
                  overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;

            }
            div.expanded {
                  width: 600px; height: 50px;
            }
      </style>
      <script type="text/javascript">
            function ShowHide(tObj, cObj) {
                  if (!tObj) {return;}
                  if (tObj.className == 'collapsed') {
                        tObj.className = 'expanded';
                        cObj.innerHTML='Click to collapse the item list';
                  }
                  else {
                        tObj.className = 'collapsed';                        
                        cObj.innerHTML='Click to see all item list';
                  }
            }
      </script>
      <body>
            <span style="float: right; font-weight: bold; color: #008;" onclick="ShowHide(document.getElementById('mytext'), this)">Click to see all item list</span>
            <div>            
            <div id="mytext" class="collapsed" >
                  Name 01,Name 02, Name 03, Name 04, Name 05, Name 06, Name 07, Name 08, Name 09, Name 10,
                  Name 11,Name 12, Name 13, Name 14, Name 15, Name 16, Name 17, Name 18, Name 19, Name 20,
                  Name 21,Name 22, Name 23, Name 24, Name 25, Name 26, Name 27, Name 28, Name 29, Name 30,
                  Name 31,Name 32, Name 33, Name 34, Name 35, Name 36, Name 37, Name 38, Name 39, Name 40,
                  Name 41,Name 42, Name 43, Name 44, Name 45, Name 46, Name 47, Name 48, Name 49, Name 50,
                  Name 51,Name 52, Name 53, Name 54, Name 55, Name 56, Name 57, Name 58, Name 59, Name 60,
                  Name 61,Name 62, Name 63, Name 64, Name 65, Name 66, Name 67, Name 68, Name 69, Name 70,
            </div>
            </div>
      </body>
</html>
0
 
_agx_Commented:
Yes, if it's a lot of text scrolling can be annoying.  Another possibility is to make the expanded text click-able. So the user can click anywhere in the text and collapse it automatically.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
            toggleAll(false);
        $(".extraNames").click(function() {
              toggleAll(false);
            });
        $(".showAll").click(function() {
              toggleAll(true);
            });
      });
      
      function toggleAll(display) {
            $(".extraNames").toggle(display);
        $(".showAll").toggle(!display);
      }
</script>
</head>
<body>
<h3>Names</h3>
<cfoutput query="getNames">
      <cfif currentRow eq 21>
            <span class="extraNames" title="Click to collapse all">
      </cfif>
      #Name#
      <cfif currentRow eq getNames.recordCount and currentRow gte 21>
            </span>
            <a href="##" class="showAll">...Click to show all</a>
      </cfif>
</cfoutput>
</body>
</html>
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
CFbubuAuthor Commented:
Hi agx_ !!! :))))

Thanks all for the posted clear solutions.

I know I am asking a silly question, but though I have a link that say 'click to show all', is it possible to show a link that says 'click to close' which is only available after the list expanded? When the user clicks the 'click to close' button, the list will collapse back to what it was before the user clicked the 'click to show all' link.

Thanks very very much again!

p.s. - _agx_, hope you had a great weekend, and here's wishing you a pleasant week ahead!
0
 
Pravin AsarCommented:
My solution does the the toggle and change on the clickable text.

Did you try my code ?


 <script type="text/javascript">
            function ShowHide(tObj, cObj) {
                  if (!tObj) {return;}
                  if (tObj.className == 'collapsed') {
                        tObj.className = 'expanded';
                        cObj.innerHTML='Click to collapse the item list';
                  }
                  else {
                        tObj.className = 'collapsed';                        
                        cObj.innerHTML='Click to see all item list';
                  }
            }
      </script>
0
 
_agx_Commented:
Sure :)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
      $(document).ready(function() {
        toggleAll();
        $(".extraNames").click(function() {
              toggleAll();
            });
        $(".showAll").click(function() {
              toggleAll();
         });
      });
     
      function toggleAll() {
            var isVisible = $(".extraNames").is(":visible");
        $(".extraNames").toggle(!isVisible);
        var text = isVisible ? "Click show all" : "Click to close";
        $(".showAll").text(text);
      }
</script>
</head>
<body>
<h3>Names</h3>
<cfoutput query="getNames">
      <cfif currentRow eq 21>
            <span class="extraNames" title="Click to collapse all">
      </cfif>
      #Name#
      <cfif currentRow eq getNames.recordCount and currentRow gte 21>
            </span>
            <a href="##" class="showAll">...Click to show all</a>
      </cfif>
</cfoutput>
</body>
</html>
0
 
CFbubuAuthor Commented:
Ahh....yes pravinasar, your code does have the one link that nicely opens and closes the hidden information :)

The only issue with your solution is that I already use many divs in my page, and when I use your css code, it messes with my page layout. How would I modify your code so that it only affects a specially named div?

But I have also figured out a small and simple addition to _agx_ solution that gives the user a link to close the expanded info too.

I think both solutions are really effective!! Wonderful!
0
 
_agx_Commented:
@CFbubu - Thanks, and you too.  (I love long summer weekends! :)
0
 
Pravin AsarCommented:
So far you have unique class name defined for the div, it would not mess up the page layout.

For the wrapper div  (before <div id="mytext" class="collapsed" >), you may define unique class.

By the way, wrapper does not have to <div> , it can be <span>
0
 
Gurpreet Singh RandhawaWeb DeveloperCommented:
you can try this custom tag Coldfusion based,

http://readmore.riaforge.org/

if you need some editing, let me know, i will edit it

Cheers:)
0
 
CFbubuAuthor Commented:
Hey Guys,

The last 2 weeks have been crazy for me as I have been in and out of a family emergency which I thought was more stable(had to fly back and forth). But fortunately as of yesterday, all is well now.

I am super grateful for your kind understanding and your patience with me as I now am able, with a more peaceful mind, to tell you guys all how much your help means to me!

All your solutions do work, but I have not had time to look into 'myselfrandhawa' custom tag yet.

_agx_, hope you are having a great week so far. Btw, thanks for including the collapse code!

Regards all!
0
 
Gurpreet Singh RandhawaWeb DeveloperCommented:
hi cfbubu, u can check the tag anytime later, i hope that comes to ur help in any other way

cheers
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

  • 3
  • 3
  • 3
  • +2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now