Link to home
Start Free TrialLog in
Avatar of CFbubu
CFbubu

asked on

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:


User generated image
Avatar of Lee Wadwell
Lee Wadwell
Flag of Australia image

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

SOLUTION
Avatar of Pravin Asar
Pravin Asar
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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>
Avatar of CFbubu
CFbubu

ASKER

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!
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>
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of CFbubu

ASKER

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!
@CFbubu - Thanks, and you too.  (I love long summer weekends! :)
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>
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:)
Avatar of CFbubu

ASKER

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!
hi cfbubu, u can check the tag anytime later, i hope that comes to ur help in any other way

cheers