CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jimmy
Jimmy

Reputation: 12487

Jquery showing hidden content

This is my pen: http://codepen.io/anon/pen/IszKj

What I want to do is how it so when I click on either any status or any date I open up a hidden div which gives a list of options.

My question is, how do I approach this in the best way?

  1. Do I have two different divs and then open the one which is relevant to the list item which was clicked:
<div id="status" style="display: hidden">Option 1 Option 2</div>
<div id="date" style="display: hidden">Option 1 Option 2</div>
  1. Do I have one div and only show the content inside it which is relevant to that button?
<div style="hidden">
<span id="status">...</span> 
<span id="date">...</span> 
</div>

In addition to this, should I be using toggle or the traditional open / close function.

It would be nice for it to be degradable if JS is disabled.

Upvotes: 0

Views: 105

Answers (4)

Abhitalks
Abhitalks

Reputation: 28387

My question is, how do I approach this in the best way?

In your particular use-case, it is better that you use different blocks for each of those options.

In fact, as @mh-itc pointed out, it is better if you use nested list i.e. ul instead of div inside those lis.

Also, you may use a instead of span.

It would be nice for it to be degradable if JS is disabled.

This can be achieved by deferring the display:none; until the JavaScript is loaded and run.

Demo: http://jsfiddle.net/abhitalks/928Dj/

Markup:

<div>
    <ul id="filter">
        <li>
            <a href="#" class="dropdown">Any status ▾</a>
            <ul class="opt">
                <li><label><input type="checkbox" />Status 1</label></li>
                <li><label><input type="checkbox" />Status 2</label></li>
            </ul>
        </li>
        <li>
            <a href="#" class="dropdown">Any date ▾</a>
            <ul class="opt">
                <li><label><input type="checkbox" />Date 1</label></li>
                <li><label><input type="checkbox" />Date 2</label></li>
            </ul>
        </li>
    </ul>
</div>

CSS:

ul {
    margin: 0; padding: 0;
    list-style: none;
}
#filter {
    display: inline-block;
}
#filter > li {
    display: inline-block;
    margin-bottom: 12px;
    padding-right: 12px;
    vertical-align: top;
}
ul.opt.hidden {
    display: none;
}

jQuery Code:

// comment out to see how it degrades without javascript
$("ul.opt").addClass("hidden");
$('#filter > li > a').on("click", function(e) {
      $(this).next('ul').toggle();
});

Note: In the demo, un-comment the JavaScript code to see how it will behave when JavaScript is available. And comment out to see how it degrades when JavaScript isn't available.

Upvotes: 1

mahega
mahega

Reputation: 3311

Created a Fiddle for you:

http://jsfiddle.net/e4mQD/1/

HTML:

<div style="display: block;
height: 40px;">
    <ul id="filter">
        <li>
            <span>Any status▾</span>
            <ul class="options">
                <li>Option1</li>
                <li>Option2</li>
            </ul>
        </li>
        <li>
            <span>Any date▾</span>
            <ul class="options">
                <li>OptionA</li>
                <li>OptionB</li>
            </ul>    
        </li>
    </ul>

CSS:

#filter, .options {
  list-style-type: none;
}

.options {
  display:none;
}

.options li {
    cursor: pointer;
}

JavaScript:

$('#filter li').click(function(){
  $(this).find('.options').toggle();
});

Upvotes: 4

sternAndy
sternAndy

Reputation: 525

If you want to keep accessibility in mind change the hidden status when loading the site with javascript, if you do that user that have add-ons like NoScript active get to see every option without loosing functionality. People who use NoScript tend to dislike sites that force them to deactivate NS to use it properly.

For your solution I suggest to use two separate divs, with this you have the option to show both boxes at the same time and have a styled version that makes clear, that these are separate. Add a class like "optionbox" to these and throw your css rules in there instead of making a rule with #date, #status

Upvotes: 1

Grasper
Grasper

Reputation: 1313

display:hidden is not valid css rule. You need to use display:none

Upvotes: 3

Related Questions