Umieszczenie na stronie przycisku zmieniającego css innego elementu

Hej, potrzebuję umieścić na stronie przycisk zmieniający css innego elementu; element posiada

display: none

, po kliknięciu na przycisk zmiana na display: inline

, po ponownym kliknięciu znów <code class="css">none

próbowałam w ten sposób:

function wysunMenu() {
    var stan = 0;
    var menu = document.getElementById('lista-menu');
    if (stan===0) {
      menu.style.display="inline";
      stan + 1;
    }
    else
      {
        menu.style.display="none";
        stan - 1;
      };
}

ale przycisk tylko pokazuje menu, nie chce go ukryć

pomocy :)

myślę, że problemem będzie tu niepoprawnie skonstruowany kod tj pętla wykonuje się tylko raz i kiedy klikam ponownie aby ukryć menu to pętla się nie wykonuje
niestety nie wiem jak rozwiązać ten problem

Nie znam się na JavaScript, ale operator inkrementacji wygląda chyba tak

stan++;

stan + 1;
nic nie robi. bo nigdzie tego nie przypisujesz.

ok zmienione na stan++ i stan--, wciąż nie działa

Możesz sobie stworzyć osobną klasę dla przycisku w .css i zmieniać ją poprzez .addClass(). To dosyć powszechna praktyka.

z uzyciem zmeinnej stan musisz posluchac kolegow, ale po co uzywac zmiennej, skoro lepiej odczytac od razu wlasciwosc z obiektu. czyli wywal to stan i inkrementacje, a zamaist tego sprawdzaj czy menu.style.display=="none";. jesli tak to zamien na inline, jesli nie to zamien na none. z krotka wersja ifa zmiescisz sie w jednej linijce kodu ;)

Właściwie to sprawa jest trochę bardziej skomplikowana
A nazwa wątku została zmieniona z tego co było mi potrzebne na coś co nijak ma się do problemu, gdzie tu logika? :/

Nie jest istotne czy ten przycisk zmienia css innego elementu czy wywołuje inne akcje, najważniejszy jest fakt, że on sam ma zmienić po użyciu swoje działanie, a po kolejnym użyciu wrócić do stanu pierwotnego i tak w kółko.

Być może zabrałam się do problemu od d**y strony, bo uczę się tego na własną rękę i trochę błądzę. Sposób w jaki myślałam:

<span class="glyphicon glyphicon-align-justify pull-right menu-resp" aria-hidden="true" onclick="wysunMenu()"></span>

<ol id="lista-menu">
      <li>O nas</li>
      <li>Kontakt</li>
      <li>Sponsorzy</li>
</ol>

#lista-menu{
	display: none;
}

function wysunMenu() {
    var stan = 0;
    var menu = document.getElementById('lista-menu');
    if (stan===0) {
      menu.style.display="inline";
      stan++;
    }
    else
      {
        menu.style.display="none";
        stan--;
      };
}

To co zamierzałam osiągnąć: element, którego naprzemienne klikanie powoduje zmianę widoczności lista-menu (none/inline)
To co osiągnęłam: pierwsze kliknięcie powoduje pojawienie się lista-menu, a kolejne brak jakiejkolwiek akcji

tu masz fiddle'a to sobie podejrzyj => http://jsbin.com/jesadicuvo/1/

ale ogolnie widze ze uzywasz bootstrapa to podsylam rozwiazanie z jQuery, to takie js na sterydach:), a w bootstrapie jest w standardzie wiec czmeu nie korzystac. notabene mowilem ze bedzie to jedna linijka kodu;)

$("#pokazChowaj").click(function(){
  $("#ulMenu").toggle(!$("#ulMenu").is(":visible")); // $("#ulMenu").is(":visible") sprawdza czy element o ID "ulMenu" jest widoczny i robi negacje, czyli jesli jest widoczny to zwroci false, zas funkcja toggle, ustawia obiekt na widoczny, albo niewidoczny w zaleznosci od parametru. 

// masz jeszcze fadeToggle :
//$("#ulMenu").fadeToggle(!$("#ulMenu").is(":visible"));
//i slideToggle, ktore pokazuja i chowaja z efektem , ten slide jest wykorzystywany do menu czesto
//$("#ulMenu").slideToggle(!$("#ulMenu").is(":visible"));

});

a html masz w fiddle. komentarz troche rozjasnia

dzięki za pomoc :)

jeszcze jedno pytanko, kiedy ustawiam w css aby menu było na początku schowane (visibility: hidden), to skrypt nie wykonuje się, dlaczego?

bo toggle dziala na display i ta wartosc zmienia, a nie na visibility. i czy musi byc to visibility i zachowana przestrzen?? jesli tak to musisz napisac swojego toggle, ktory sprawdzi i zamieni. dodatkowe 6 linijek kodu

dobra, działa - coś namieszałam
dzięki!