How could I use the html a tag to change div width and height?


Tags: javascript,jquery,css,html

Problem :

<div class="panel">
    <a href onclick="manipulate()">Show Quick Admin (↑)</a>
    <div class="hidden">
        <ul>
            <li>
                <a href="admin.php">Panel</a>
            </li>
        </ul>
    </div>
</div>

so i am tying to make a "quick admin bar", for the site i'm making. this is the code i am using, don't mind the fact it's bad. i tried to make it check the height and width of the div "panel", and if it was 20px, change the "a" tag's innerHTML, show the "hidden" div, and make it so that if you click the "a" tag again it will set the div height back from 300px to 20px, change the a tag's innerHTML again, and hide the "hidden" div from viewing. how would i do this?

javascript:

function manipulate() {
    if ($("#panel").height() == "20") {
        document.getElementsByClassName("panel").style.height= "300px";
        document.getElementsByClassName("hidden").style = "";
    }
}

css:

.panel {
    padding:10px;
    background:#fffdbb;
    position:fixed;
    bottom:15px;
    width:225px; 
    height:20px; /* 300px */
    right:15px;
    border:10;
    border-style:solid;
    border-width:2px;
    border-color:red;
}

.hidden {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

right now it just doesn't do anything when Show Quick Admin is clicked. how can i fix this?



Solution :

you should use [0]

 document.getElementsByClassName("panel")[0].style.height= "300px"

Why dont you use this if you are using jquery?

$(".panel").css("height","300px");

I would suggest you to use id instead of class

<div class="panel">

vs

<div id="panel">

The proper way of Using

http://jsfiddle.net/sb3fY/1/

    <div id="panel">
    <span class="link1">Show Quick Admin (↑)</span>
    <div class="hidden">
        <ul>
            <li>
               <a href="admin.php">Panel</a>
            </li>
        </ul>
    </div>
</div>

Javascript

$(".link1").on("click",function(){
  $("#panel").toggleClass("open");
  $("#hidden").toggle();
});

CSS

    #panel {
    padding:10px;
    background:#fffdbb;
    position:fixed;
    bottom:15px;
    width:225px; 
    height:20px; /* 300px */
    right:15px;
    border:10;
    border-style:solid;
    border-width:2px;
    border-color:red;
}

.hidden {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

#panel.open {
 height: 300px;
}

    CSS Howto..

    How to ask browsers to refresh (flush) the cache of my website?

    How to stack a div absolutely on top of table cells

    Css - how to add an image outside a text box (on the left side but touching the box)

    How to align divs side by side without one being slightly lower?

    How to apply css to a dynamically created div?

    How to make balloon textbook talking style using css

    How to get a asp:Panel's CSS Class in code-behind after it has changed by CSS

    How to make css transform-origin property work in IE7 and IE8?

    How do I display an empty div tag with CSS?

    How to make my HTML suitable for Mobile View

    How to load jQuery before CSS code?

    How to write this 'OR' CSS selector?

    How to make responsive video background in DIV container with dynamic height?

    How to disable parent hover, when hovering over child

    Showing/hiding elements inside a div block with HTML and CSS

    Node/Grunt - Autoprefixer - How to add configuration to my Gruntfile.js & how to check supported browsers?

    how to flip the div using css?

    How to layout a form with 1 input field + submit button so that
    and
    backgrounds do not shine through?

    How to set CSS width so that the element will have the exact window width?

    How can i make infinite flowing background with only CSS?

    How to create a fluidic list using css

    How to make div inside table same size as text inside a?

    How do I create triangles like this? [closed]

    How to make the height of the div take all the space?

    How to add Video from project directory in the background of Div

    How to style an anchor tag to look like a button with the same height as the button?

    Why my tabs (i.e HOME, ABOUT ME..) doesn't show the corresponding paragraph or section?

    How to activate a CSS3 (webkit) animation using javascript?

    How Can I Use CSS :after to Add a Glyphicon Element to an Input

    How to reference a long class name with spaces in CSS?