[RESOLVED]Show More or Less in Smartphones/Tablets

I have 6 radiobuttons & depending on the no. i.e 1 to 6, that many textboxes should be dynamically created. So far fine.

Now on desktops all 6 should be visible. But on smartphones/tablets, only 3 should be shown & there must a More radiobutton, which on click should show the remaining 3, now with the Less radiobutton as well.

UI for smartphones should be like

1           2           3        More>

<Less    4           5        6

I guess media queries is the only option but any idea how?

Generally for situations like these, I would recommend some type of Responsive Design framework if you aren’t using one already :

Consider Responsive A Responsive Design Framework

Depending on your requirements, a responsive web application may be a much easier to implement solution as you’ll just have to design a single web application that will run on any device (phone, tablet, desktop) that has a web browser and your users
will enjoy the same experience (thanks to Responsive Design).

If your intention is to develop a web application, then you should be alright as far as it being "universally accessible". Regardless of how you elect to develop it (Web Forms, MVC, etc.) it will run within just about any browser on any device that
has access to the web. If your concerns lie with it’s appearance, then you might want to consider designing it using a  so that it maintains a uniform look across all devices and platforms.

Consider using one of the many Responsive Design Frameworks that are out there for your site, such as the Twitter
Bootstrap
. Responsive design focuses on making your site easily usable and accessible from basically any resolution and devices available.

These could fairly easily be integrated into a Web Forms or MVC application and would basically be all that you would need to use : 

This would really eliminate having to distinguish between a mobile and traditional (desktop) CSS file for each of the pages within your website. The above articles are specific to integrating Bootstrap (one of the most popular
Responsive Design frameworks out there
) into your ASP.NET Applications.

Implementing Your Functionality

For instance, let’s say you have your Radio Buttons as follows :

<!-- A container to handle managing the "active" state of more or less -->
<div class='wrapper less'>
      <!-- All of your "less" elements that will be visible while in the "less" state -->
      <span class='less'><input type='radio' /> 1 </span>
      <span class='less'><input type='radio' /> 2 </span>
      <span class='less'><input type='radio' /> 3 </span>
      <!-- Your button to toggle the parent wrapper class -->
      <span class='less'><a href='#' onclick='$(this).closest(".wrapper").addClass("more").removeClass("less");'>More >></a></span>
      <!-- Your button to toggle the parent wrapper class and your "more" elements --> 
      <span class='more'><a href='#' onclick='$(this).closest(".wrapper").addClass("less").removeClass("more");'><< Less</a></span>
      <span class='more'><input type='radio' /> 4 </span>
      <span class='more'><input type='radio' /> 5 </span>
      <span class='more'><input type='radio' /> 6 </span>
</div>

Then you’ll just need to define a media query to handle showing and hiding your elements as follows :

/* Under normal resolutions, hide your more and less options */
.wrapper.less a, .wrapper.more a { display: none;}

/* When targeting small devices */
@media (max-width: 767px) {
  /* Only display less elements when the parent class has the less class */
  .wrapper.less .less,
  .wrapper.less .less a,
  .wrapper.more .more,
  .wrapper.more .more a { display: inline; }
  /* Likewise, hide elements that aren't being targeted by the parent class */
  .wrapper.less .more,
  .wrapper.more .less { display: none;}
}

 You can see a working example here and demonstrated below.

Full Resolution :

Small Resolution :

After clicking the "More" Option :

@Rion,

Awsome..

You can actually still hook those buttons to events using the onclick method (which triggers a client-side event) :

<div class='wrapper less'>
      <span class='less'><input type='radio' /> 1 </span>
      <span class='less'><input type='radio' /> 2 </span>
      <span class='less'><input type='radio' /> 3 </span>
      <span class='less button'>
        <input type='radio' onclick='$(this).closest(".wrapper").addClass("more").removeClass("less");' /> More &gt;&gt;
      </span>
      <span class='more button'>
        &lt;&lt; Less
         <input type='radio'  onclick='$(this).closest(".wrapper").addClass("less").removeClass("more");' />
      </span>
      <span class='more'><input type='radio' /> 4 </span>
      <span class='more'><input type='radio' /> 5 </span>
      <span class='more'><input type='radio' /> 6 </span>
</div>

along with the following CSS :

.wrapper { margin: 0 auto; width: 300px; margin-top: 200px; text-align: center;}
.wrapper span { width: auto; }

.wrapper.less .button, .wrapper.more .button { display: none;}

@media (max-width: 767px) {
  .wrapper.less .less,
  .wrapper.less .less.button,
  .wrapper.more .more,
  .wrapper.more .more.button
  { display: inline; }
  .wrapper.less .more,
  .wrapper.more .less 
  { display: none;}
}

You can see an example here.

yes got it..thanks a ton..

Leave a Reply