Visibility of element function in javascript is not working

Question

I have made a search bar that I want to show when user will click on search image that is list item as

<li class="item" onclick="showSearch()"><img id="search" src="images/search.png" ></li>

I set the visibility to hidden in HTML as

<div id="bar_search" style="visibility:hidden;">

have a function as

function showSearch () {
    document.getElementById("bar_search").style.visibility = "visible"; 
}

but when i click on list item it does not show however hidden property working fine.

where I'm making mistake please tell me, thanks

Update: content in the div

<div id="bar_search" style="visibility:hidden;">
        <img id="searchbar" src="images/searchBar.png">
        <div id="searchDec">
            <input type="text">
            <button ><b>Search</b></button>
        </div>
    </div>

There is no obvious error in the code. Do you get any error message? — Guffa
– Guffa, Commented Aug 26, 2015 at 21:35
have you checked that there is an element with an id attribute bar_search? You can always use console.log to see what's happening. For instance console.log(document.getElementById('bar_search').length));if not 1 or more then there are no elements with the id bar_search. — bashleigh
– bashleigh, Commented Aug 26, 2015 at 21:35
Place your code at the end of the html, before closing body tag... Btw, what is vanilla JS alternative for $(document) ready? :) — sinisake
– sinisake, Commented Aug 26, 2015 at 21:35
@nevermind — Why? The event handler is bound with an onclick attribute. — Quentin
– Quentin, Commented Aug 26, 2015 at 21:38

alphapilgrim · Accepted Answer · 2015-08-26 22:03:37Z

1

Try setting the property through your style sheet and see if you can't get it to change with the event-handler.

    <node class="hidden" onclick=toggleVisibilty()"></node>

Or if your not opposed to using jQuery, then you could always use the toggle method, so as to toggle the class that way.

http://api.jquery.com/toggle/

answered Aug 26, 2015 at 22:03

alphapilgrim

3,97510 gold badges33 silver badges64 bronze badges

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

Comments

A7med · Accepted Answer · 2015-08-26 21:52:29Z

0

your code is fine maybe you have syntax error in the same page

function showSearch() {
    document.getElementById("bar_search").style.visibility = "visible";
}

<li class="item" onclick="showSearch()">
    <img id="search" src="https://wiki.ubuntu.com/IconsPage?action=AttachFile&do=get&target=search.png">
</li>
<div id="bar_search" style="visibility: hidden;">
    <img id="search" src="https://i.sstatic.net/X6BXa.png">
</div>

answered Aug 26, 2015 at 21:52

A7med

741 silver badge6 bronze badges

Collectives™ on Stack Overflow

Visibility of element function in javascript is not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related