CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Fadly Dzil
Fadly Dzil

Reputation: 2206

change position of some html on hide some html using jquery

How can I manipulate css using jquery on case like this : I have two box in a row, when the first box hidden, I change the width of the second box to full of page.

Two form

After hide for the first form is active, there is a space left. SO the form looked like weird. like this : enter image description here

This my jquery to show /hidden the box .

// code to hide the first box
$(document).on('click', '#close', function() {
        $("#kotak_pencarian").hide(); //hide the box
        $('#btn-pencarian').show(); // show button for toggle
        $("#kotak_hasil").removeClass("span9").addClass("span12"); //manipulate width second box
    });

    // code to show the first box
    $(document).on('click', '#btn-pencarian', function() {
        $(this).hide(); // toggle button show 1st box
        $("#kotak_pencarian").show(); // show first box
        $("#kotak_hasil").removeClass("span12").addClass("span9"); //manipulate width of second box
    });

I debug it using firebug, my code looked like this before DOM jquery,

<div id="kotak_pencarian" class="box span3"> .... bla,bla of first box
<div id="kotak_hasil" class="box span9">... bla bla of second box,

but when hfirst box is hidden, the code become :

<div id="kotak_pencarian" class="box span3" style="display: none;"> .. first box
<div id="kotak_hasil" class="box span12"> ...second box

I think I must manipulate css too on jquery, How can I make it the css to neat ?

Upvotes: 1

Views: 124

Answers (1)

Powkachu
Powkachu

Reputation: 2268

Where is your button for toggle? Maybe your class span 12 on your kotak_hasil div can't work properly because of the button?

Or maybe there is a margin-left on your kotak_hasil div?

Hope it helps

Upvotes: 1

Related Questions