minestarm: Objekt per Mausklick anzeigen und schließen

Beitrag lesen

Hallo,

Bin gerade dabei eine "Wordpress-Seite" aufzubauen, aber dass sei erstmal dahingestellt den hier geht es um den Header der rein aus HTML/CSS und Java bestehen soll.

Meine Webseite soll bzw. hat eine Desktop-Version als auch eine Mobile-Version die bei Bildschirmgröße/Fenstergröße:985px umschaltet. Funktioniert alles wunderbar...

In der Desktop-Version wird die Suche im Banner angezeigt und die Navigation ist geöffnet unter dem Banner
In der Mobile-Version ist die Suche und die Navigation versteckt und wird über einen Button (Div-Tag) geöffnet.

Hier erstmal der Link zu meiner Seite: "http://minestarm.lima-city.de/"

Jetzt geht es erstmal nur um die Mobile-Version, denn ich möchte sobald man den "Menü-Button" anklickt, dass sich das Menü öffnet und die Suche schließt falls geöffnet. Andersherum sobald man den "Suchen-Button" anklickt möchte ich dass sich die Suche öffnet und die Navigation schließt falls geöffnet. Klickt man ein weiteres Mal auf den jeweiligen Button schließt sich das zuvor geöffnete Objekt (Suche/Navigation). Zusätzlich sollen sich noch die CSS-Eigenschaften der Button ändern wenn das jeweilige Objekt (Suche/Navigation) geöffnet ist.

Aktuell habe ich nur geschafft, dass sich per Klick das Objekt öffnet und per weiterer Klick wieder schließt.

Das hier sind die "Button´s ("menue" und "sfm" ... "navi" ist die ID für die Navigation und "sboxm" ist die Suche)
HTML:

<div id = "menuesearch">  
    <div id = "menue" onclick="toggle_visibility('navi');">  
    </div>  
    <div id = "sfm" onclick="toggle_visibility('sboxm'); nomenue();">  
    </div>  
</div>

Das ist mein bisheriges Script (ehrlich gesagt auch nur aus dem Inet zusammengebastelt)
HTML:

<script type="text/javascript">  
    function toggle_visibility(id) {  
           var e = document.getElementById(id);  
           if(e.style.display == 'block')  
              e.style.display = 'none';  
           else  
          e.style.display = 'block';  
    }  
</script>  

Bin leider mit Java-Script nur wenig bis gar nicht vertraut. Das wäre auch mit das einzigste Java was ich auf meiner Seite brauche. HTML und CSS bin ich doch schon sehr viel mehr erfahren. Würde mich sehr freuen wenn mir jemand helfen könnte. Den Code hab ich vereinfacht damit unwichtige Elemente nicht für Verwirrung sorgen... Falls ich was vergessen habe bitte Bescheid sagen.

MfG minestarm