6
\$\begingroup\$

I was recently working on a project, something jQuery-related for WP-Admin area.

I enable post-formats and create metaboxes for these post-formats, so at the end I tried to hide these metaboxes until the user checks the radio button. I just want to know if there is a better way I can write this code.

// hide the metabox at start
$('#gallery-box').hide();

// fetch the id name of checked post-format 
var idName = $('input.post-format:checked').attr('id');

// display the metabox if the fetched value matched
if ( idName === 'post-format-gallery' ) {
    $('#gallery-box').show();
}

// show or hide
$('.post-format').click(function(){
    idName = $(this).attr('id');
    if ( $(this).is(':checked') ) { 
        if ( idName === 'post-format-gallery' ) {
            $('#gallery-box').show();
        } else {
            $('#gallery-box').hide();
        }
    }
});
\$\endgroup\$
5
\$\begingroup\$

If you know exactly which radio button you are interested in, then you should prefer to select it by ID, for performance. Presumably, your radio buttons will be part of a group with the same name, so it would be more conventional to select the elements by the name instead of by a class.

If you have to conditionally call .show() and .hide(), you can use .toggle().

Avoid hard-coding hide() as the initial state. It would be better to have the "Hide" radio button marked as checked in the HTML, then let the JavaScript follow suit. To bind an event handler and execute it right away, you could use .trigger(), but note that triggering the 'click' event also toggles the radio state, so you'll want to make a separate 'init-post-format' event type.

$(function() {
    $('input[name=post-format]').on('click init-post-format', function() {
        $('#gallery-box').toggle($('#post-format-gallery').prop('checked'));
    }).trigger('init-post-format');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<label><input type="radio" name="post-format" id="post-format-gallery">Show gallery</label>
<label><input type="radio" name="post-format" checked>Hide gallery</label>

<div id="gallery-box" style="border: 1px solid red;">The Gallery</div>

\$\endgroup\$
  • \$\begingroup\$ Awesome, that's working fine and its the shortest way i suppose. I think its a good place to learn with the help of such great teachers, friends and scholars. I should learn more about jquery, now going to learn about .trigger(). do u mind if i as some good resources to learn easily jquery with good understanding. \$\endgroup\$ – Jason Carlos Dec 24 '14 at 1:26
  • \$\begingroup\$ but note that triggering the 'click' event also toggles the radio state, so you'll want to make another event type. this line is bit unclear and complicated for me. \$\endgroup\$ – Jason Carlos Dec 24 '14 at 1:27
  • \$\begingroup\$ The jQuery website is excellent, and it also has guide for learning from scratch. \$\endgroup\$ – 200_success Dec 24 '14 at 1:33
  • \$\begingroup\$ Thank you, I am already reading jquery documentation, but sometime these are very difficult to understand few thing. but anyways. thank you again. \$\endgroup\$ – Jason Carlos Dec 24 '14 at 1:35
  • \$\begingroup\$ Calling $('input[name=post-format]').trigger('click') will simulate a click of every radio button. That might change the selected item, which is too much. All you want to call is the handler. \$\endgroup\$ – 200_success Dec 24 '14 at 1:35
4
\$\begingroup\$

#show:not(:checked) ~ p { display: none }
<input type="checkbox" id="show" /> <label for="show">Show</label>
<p>Why use jQuery when you can use CSS?</p>
<aside>Checkbox is the correct UI element for this, BTW.</aside>

You should use CSS instead of JS whenever possible because it's faster, smaller (this is a one-liner) and thus easier to understand, and keeps presentational stuff all together in one CSS file instead of in a CSS file and a separate JS file.

\$\endgroup\$

protected by Jamal Dec 24 '18 at 2:37

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.