0

I got a custom field and I want to toggle a specific custom field. So for example I have 2 custom fields named: Subject and Score. When viewing a single post the custom field 'Score' data is hidden until a user clicks on the button to see the data. How can I do this toggle effect?

  • Placing an if statement around the custom field score in the front end and check for the state of the checkbox like if($statecheck == 1); $statecheckrepresenting if the according checkbox is checked or not. – rpk Mar 21 '15 at 10:48
  • I'm not a programmer so I don't understand about the if statement – Ruriko Mar 21 '15 at 23:24
1

You could do this with jquery.

I have a similar code on use which you could probably easily edit to your needs:

load the admin js (I load css too but you can remove that)

function wpse181868_admin_css_js() {
    wp_register_style( 'bones_admin_css', get_template_directory_uri() . '/library/css/admin.css', false );
    wp_enqueue_style( 'bones_admin_css' );

    //adding scripts file in the footer
    wp_enqueue_script( 'admin_js', get_stylesheet_directory_uri() . '/library/js/admin.js', array( 'jquery' ), '', true );
}
add_action( 'admin_enqueue_scripts', 'wpse181868_admin_css_js' );

and then in the js check and show stuff as needed (I show different boxes for different post formats)

jQuery(document).ready(function($) {
    function checkFormat() {
        $('#attachments-gallery_attachments').hide();
        $('#featured_video').hide();
        if($('input[name=post_format]:checked', '#formatdiv').val() == "gallery") { $('#attachments-gallery_attachments').show(); }
        if($('input[name=post_format]:checked', '#formatdiv').val() == "video") { $('#featured_video').show(); }
    }

    $('#formatdiv input[type="radio"]').live('click', checkFormat);
    checkFormat();
});

EDIT: In you theme's functions.php add this code

function wpse181868_admin_js() { ?>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
        var $input = $('<input type="button" id="s_s" value="Show score" />');
        $('input[name^="meta["]').each(function(){
            var val = $(this).val();
            if(val == "score") {
                var valueTD = $(this).parent().siblings();
                $(valueTD.find('textarea')).hide();
                $input.appendTo($(valueTD));
                $('#s_s').click(function(){ $(valueTD.find('textarea')).show(); $input.remove(); });
            }
        });
    });
    </script>
<?php }
add_action('admin_footer', 'wpse181868_admin_js');
  • I just didn't understand what you just said since I'm not a programmer. Where do I put this code? what parts need editing? – Ruriko Mar 21 '15 at 23:34
  • So how did you come up having these two custom fields then? What are their IDs and you are able to modify the theme files right? – jimihenrik Mar 21 '15 at 23:57
  • I created these fields with just using the gui in the create post area section. The two custom fields are named 'Subject' and 'Score'. Yes I can modify themes files – Ruriko Mar 22 '15 at 0:15
  • I'm sorry, with "create post area section" do you mean the "custom fields" section where you can add custom fields to the current post? edit: and sorry, I really need some sleep right now, I'll give it a look in the morning. – jimihenrik Mar 22 '15 at 0:21
  • yea that's what I mean. – Ruriko Mar 22 '15 at 0:29
0

I'm not sure you still have this issue, but recently I have the same struggle...

And this is what I found.

Toggle with CSS only. I try showing you in the most simple way You could do this with JQuery, though.

HTML(single.php or page.php, or something)---------------------

<?php if ( $post->Scores ): ?>
  <div class="menu">
    <label for="A">Scores</label>
    <input type="checkbox" id="A" class="B" />
    <div class="C">
      <?php echo nl2br( $post->Scores ); ?>
    </div>
  </div>
<?php endif; ?>

CSS--------------------

label {
    color: #3f3f3f;
    padding: 0px;
    display: block;
    margin: 0;
    border: 1px solid #fff;
}

input[type="checkbox"].B{
    display: none;
}

.menu .C {
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    margin: 0;
    padding: 5px;
}

input[type="checkbox"].B + .C{
    height: 0;
    overflow: hidden;
}

input[type="checkbox"].B:checked + .C{
    height: 200px;
}

Please customize CSS such as the height, margin, padding, color, etc as you like.

Hope this helps you and works for your site.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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