reduce <DIV> width when external page loaded in same page

Question

Am using the following code to load external in same page,in <div id="menu"> i have menu and when option is clicked external page will be loaded inside <div class="page"></div>

menu width is 25%
page is 70%

Now how do i change width of <div id="menu"> to 10% when external page is loaded

FULL CODE

<!DOCTYPE html>
   <html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #menu{width:25%;background-color:beige;float: left}
            .page{width: 70%;height:200px;float: left;background-color: #99ffff}
        </style>
    </head>
    <body>
        <div class="container">
        <div class="box">                                        
            <div id="leftmenu">
                <ul id="leftmenuidfrmslt">
                    <li><span class="flaticon-smart"></span><text>&nbsp;&nbsp;Mobile & Tablet</text>
                        <ul>
                            <li><a class="reveal" href="postpage/mobile.php">&Xi;&nbsp;Mobile Phones</a></li>
                            <li><a class="reveal" href="postpage/tablet.php">&Xi;&nbsp;Tablets</a></li>
                            <li><a class="reveal" href="postpage/mobileaccessories.php">&Xi;&nbsp;Mobile Accessories</a></li>
                        </ul>
                    </li>
</div>
        <div class="page"></div>

        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript">
             $(document).ready(function() {
                $('.reveal').on('click', function(e) {
                    e.preventDefault();
                    var link = $(this).attr('href');
                    $('.page').load(link);
                    $('#leftmenu').css('width', '70px');
                    $("#leftmenu text").hide();
                    $('#leftmenu').off("click");
                    $(this).show();
                });
            });
        </script>
    </body>
</html>

did you try $("#menu").css("width","10%");

Suresh Ponnukalai
– Suresh Ponnukalai

2014-11-17 07:54:31 +00:00
Commented Nov 17, 2014 at 7:54 — Suresh Ponnukalai
– Suresh Ponnukalai, Commented Nov 17, 2014 at 7:54

Rasel · Accepted Answer · 2014-11-17 07:57:05Z

1

change width using jquery css $('#menu').css('width', '10%');

$(document).ready(function() {

        $('.reveal').on('click', function(e) {
            e.preventDefault();
            var link = $(this).attr('href');
            $('.page').load(link);
            $('#menu').css('width', '10%');
            $(this).show();
        });

answered Nov 17, 2014 at 7:57

Rasel

5,7643 gold badges32 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

user4256522 Over a year ago

how can i hide text inside that div alone

Rasel Over a year ago

try this to hide text $('#menu').css('color', 'transparent');

sanoj lawrence Over a year ago

Everything works fine i need to disable the entire div ,Hover effect and click ,,??

Rasel Over a year ago

$('#menu').click(function() { $('#menu').hide(); }); to hide div

Rasel Over a year ago

$('#menu').unbind('click'); to disable click in the div

|

Collectives™ on Stack Overflow

reduce <DIV> width when external page loaded in same page

1 Answer 1

13 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related