CODEWITHSUNDEEP
jquerytogglevisibility
kaiser
kaiser

Reputation: 22353

jquery - toggle visibility of divs inside a div

I got a problem with a jQuery function.

Situation

I got one div, containing a list of <input type="radio" /> elements. These should remote control the visibility of the other two divs. The first radio input field should show the first div when checked, the other ones should a) the second div and b) only one of the divs inside the second div.

Problem

The display (show/hide toggle) between the first & second main divs works fine. What doesn't work is the toggling the visibility state of the divs inside the second div.

<script type="text/javascript">
    jQuery( document ).ready( function($)
        {
            $( "#post_format_box" ).addClass( "hidden" );

            $( "input#post-format-0" ).change( function() {
                $( "#postdivrich" ).removeClass( "hidden" );
                $( "#post_format_box" ).addClass( "hidden" );
            } );

            $( "input:not(#post-format-0)" ).change( function() {
                $( "#postdivrich" ).addClass( "hidden" );
                $( "#post_format_box" ).removeClass( "hidden" );
            } );

            $( "#post-format-aside" ).change( function() {
                $( "#aside" ).removeClass( "hidden" );
            } );
            $( "#post-format-audio" ).change( function() {
                $( "#audio" ).removeClass( "hidden" );
            } );
            $( "#post-format-chat" ).change( function() {
                $( "#chat" ).removeClass( "hidden" );
            } );
            $( "#post-format-gallery" ).change( function() {
                $( "#gallery" ).removeClass( "hidden" );
            } );
            $( "#post-format-image" ).change( function() {
                $( "#image" ).removeClass( "hidden" );
            } );
            $( "#post-format-link" ).change( function() {
                $( "#link" ).removeClass( "hidden" );
            } );
            $( "#post-format-quote" ).change( function() {
                $( "#quote" ).removeClass( "hidden" );
            } );
            $( "#post-format-status" ).change( function() {
                $( "#status" ).removeClass( "hidden" );
            } );
            $( "#post-format-video" ).change( function() {
                $( "#video" ).removeClass( "hidden" );
            } );
        }
    );
</script>

The divs look like this:

<div id="formatdiv">
<!-- REMOTE CONTROLING DIV -->
    <!-- SHOWS/HIDES THE #postdivricht -->
    <input type="radio" class="post-format-0" checked="checked" />

    <!-- THESE SHOW/HIDE THE SINGLE DIVS INSIDE #postdivricht -->
    <input type="radio" id="post-format-aside" />
    <input type="radio" id="post-format-audio" />
    <input type="radio" id="post-format-chat" />
    <input type="radio" id="post-format-gallery" />
    <input type="radio" id="post-format-image" />
    <input type="radio" id="post-format-link" />
    <input type="radio" id="post-format-quote" />
    <input type="radio" id="post-format-status" />
    <input type="radio" id="post-format-video" />
</div>

<div id="postdivrich">
    <!-- FIRST REMOTE CONTROLED DIV -->
</div>

<div id="post_format_box">
    <!-- SECOND REMOTE CONTROLED DIV -->
    <div id="aside">
        <p>Aside</p>
    </div>
    <div id="audio">
        <p>Audio</p>
    </div>
    <div id="chat">
        <p>Chat</p>
    </div>
    <div id="gallery">
        <p>Gallery</p>
    </div>
    <div id="image">
        <p>Image</p>
    </div>
    <div id="link">
        <p>Link</p>
    </div>
    <div id="quote">
        <p>Quote</p>
    </div>
    <div id="status">
        <p>Status</p>
    </div>
    <div id="video">
        <p>Video</p>
    </div>
</div>

Upvotes: 2

Views: 3426

Answers (3)

jrn.ak
jrn.ak

Reputation: 36619

Quick and dirty:

(Also, assuming [because of the Radio buttons] that you only want 1 of those visible at a time)

Live Demo

Ditch all of the individual .change() functions for this:

$("input[name=post-format]").click(function() {
    var mydiv = $(this).attr('class').replace('post-format-','');
    $("#post_format_box div").addClass("hidden");
    $("#post_format_box div#"+mydiv).removeClass("hidden");
});

Please Note: I've added the name attribute to your Radio buttons.

Upvotes: 3

Josh
Josh

Reputation: 16567

try $("#postdivrich").show(); and $("#postdivrich").hide();

if you want to get fancy you can do $("#postdivrich").fadeIn(600); and $("#postdivrich").fadeOut(600);

Or, you could go even use $.fadeToggle();

Upvotes: 1

Naftali
Naftali

Reputation: 146320

all your code in the html is using classes, wherein all the code in the js is using ids:

change the lines like thi, for example:

   $( "#post-format-status" ).change( function() {
            $( "#status" ).removeClass( "hidden" );
        } );

BECOMES:

    $( ".post-format-status" ).change( function() {
            $( "#status" ).removeClass( "hidden" );
        } );

also use checkboxes not radio's for toggles

Upvotes: 2

Related Questions