Unveiling concealed content with JQuery

Question

Unveiling concealed content with JQuery

Here is a link to my pen: http://codepen.io/anon/pen/IszKj

I am looking to achieve the functionality where clicking on either "any status" or "any date" will reveal a hidden div containing a list of options.

My main query is about the best approach to take in implementing this feature.

Should I have two separate divs and open the one corresponding to the clicked list item?

<div id="status" style="display: hidden">Option 1 Option 2</div>
<div id="date" style="display: hidden">Option 1 Option 2</div>

Alternatively, should I use a single div and display only the relevant content for that button click?

<div style="hidden">
<span id="status">...</span> 
<span id="date">...</span> 
</div>

Moreover, I'm unsure whether to utilize toggle or the conventional open / close function.

Lastly, it would be ideal if the functionality gracefully degrades when JavaScript is disabled.

javascript jquery html css

Answer 1

Answer №1

Here's a Fiddle I created for you:

http://jsfiddle.net/e4mQD/2/

HTML:

<div style="display: block;
height: 40px;">
    <ul id="filter">
        <li>
            <span>Any category▾</span>
            <ul class="options">
                <li>Category1</li>
                <li>Category2</li>
            </ul>
        </li>
        <li>
            <span>Any date▾</span>
            <ul class="options">
                <li>DateA</li>
                <li>DateB</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();
});

Answer 2

Here's a Fiddle I created for you:

http://jsfiddle.net/e4mQD/2/

HTML:

<div style="display: block;
height: 40px;">
    <ul id="filter">
        <li>
            <span>Any category▾</span>
            <ul class="options">
                <li>Category1</li>
                <li>Category2</li>
            </ul>
        </li>
        <li>
            <span>Any date▾</span>
            <ul class="options">
                <li>DateA</li>
                <li>DateB</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();
});

Answer 3

Answer №2

visibility: none is not a proper CSS style. Please use display: none

Answer 4

visibility: none is not a proper CSS style. Please use display: none

Answer 5

Answer №3

How should I best approach this situation?

For your specific scenario, it's advisable to utilize separate blocks for each option.

As suggested by @mh-itc, consider using nested lists (ul) instead of div within the li elements.

Additionally, opt for using an anchor tag (a) rather than a span element.

It would be beneficial if the functionality degrades gracefully without JavaScript.

You can achieve this by delaying the application of "display:none;" until after the JavaScript has loaded and executed.

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 provided demonstration, uncomment the JavaScript code to observe its behavior when JavaScript is enabled. Conversely, comment it out to witness degradation in the absence of JavaScript support.

Answer 6

How should I best approach this situation?

For your specific scenario, it's advisable to utilize separate blocks for each option.

As suggested by @mh-itc, consider using nested lists (ul) instead of div within the li elements.

Additionally, opt for using an anchor tag (a) rather than a span element.

It would be beneficial if the functionality degrades gracefully without JavaScript.

You can achieve this by delaying the application of "display:none;" until after the JavaScript has loaded and executed.

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 provided demonstration, uncomment the JavaScript code to observe its behavior when JavaScript is enabled. Conversely, comment it out to witness degradation in the absence of JavaScript support.

Answer 7

Answer №4

To ensure accessibility, consider changing the hidden status using JavaScript when loading the site. By doing this, users with add-ons like NoScript enabled will be able to view all options without sacrificing functionality. Those who use NoScript typically prefer not to disable it in order to use a website properly.

One solution is to utilize two separate divs for each option box. This way, both boxes can be displayed simultaneously and clearly differentiated with a styled version. Assign a class such as "optionbox" to these divs and apply your CSS rules there instead of creating a rule with #date, #status

Answer 8

To ensure accessibility, consider changing the hidden status using JavaScript when loading the site. By doing this, users with add-ons like NoScript enabled will be able to view all options without sacrificing functionality. Those who use NoScript typically prefer not to disable it in order to use a website properly.

One solution is to utilize two separate divs for each option box. This way, both boxes can be displayed simultaneously and clearly differentiated with a styled version. Assign a class such as "optionbox" to these divs and apply your CSS rules there instead of creating a rule with #date, #status

Unveiling concealed content with JQuery

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Balanced Columns with Background Extending Beyond Half of the Page

Style Vue slots one by one

Adding a Video as a Background Button Using HTML and CSS

Is there a method in JavaScript/jQuery to gently push or flick the scroll so that it can be easily interrupted by the user? Further details are provided below

Steps to delete an item from a table without affecting the database

Troubleshooting problem with Bootstrap Modal inputs and header tags

Incorporating Selenium Python to display text results in a single-line format for enhanced output presentation

Calculating distinct values within a single key in an object

Guide on retrieving the ID after a new entry is added using a trigger in Express.js and MySQL

Manipulating variables in the main controller scope from a function in a transcluded directive scope using AngularJS

Dealing with the problem of delayed image loading in AngularJS due to a setTimeout conflict

Issues with HTML keycodes not functioning properly in Firefox

Having trouble finding a solution because Ajax/JSON is only retrieving a single result from the PHP/SQL file

Comparing timestamps in MySQL with those in jQuery: A guide

Issue with jQuery .hover() not functioning as expected

Adjust the number of columns displayed when rendering with Datatables

An effective way to determine the size of a browser through javascript

Utilize Bootstrap cards to display images across the full width of the page

Exploring jQuery Mobile: Uncovering the Power of clientX, clientY, and taphold Event

Can you guide me on how to interact with a table value using Selenium WebDriver?