How to show/hide divs - html

I am trying to figure out how to do this... I have 4 divs that I am looking to show and hide one at a time. The link to the divs are in a separate nested div. Here's my code:
<div id="container">
<div class="roundbox">
<ul>
<li class="t">
Main
</li>
<li class="e">
News
</li>
<li class="t">
History
</li>
<li class="e">
Contact
</li>
</ul>
</div>
<div class="inceptioncontent">
<div class="content">
<div class="contentnest">
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
</div>
</div>
</div>
</div>
I want the Main, News, Contact, and History links to show/hide the corresponding divs in the contentnest div. Any ideas? Thanks!

JQuery is great at doing his sort of thing. This looks like a good place to start: http://papermashup.com/simple-jquery-showhide-div/

It seems your looking for a drop down menu. You can achieve this:
Coding it in Javascript + css ( with a framework like jQuery it will be easier)
; With Css
; Downloading A plugin
I think the "Css only" is the best way, jQuery is cool and download a plugin it's the easiest way, but you need the js of the user's explorer to be on.
You can check how to do it only with css here:
https://www.grc.com/menudemo.htm

Related

Html. I've a problem with my carousel code, when I click on the chervon my screen page down?

Helle, I am making a website. This is a project for my studies. Since I haven't studied java script yet, I wanted to make a carousel in html en css only. This one works well except that when I press the right/left chevrons, the page scrolls down. I couldn't find where the problem was in my code.
My teacher asked me to come and ask you the question.
I therefore cometo ask you for help in order to find the solution.
Many thanks in advance.
Have a good day.
<body>
<div id="conteItemsCarrusel">
<div class="itemCarousel"id="itemCarousel-1">
<div class="carousel"id="acarrusel-1">
<img src="./image/cuisinier.jpeg" alt="itemCarousel-1">
</div>
<div class="fleche">
<a href="#itemCarousel-3">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-2">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-2">
<div class="carousel"id="acarrusel-2">
<img src="./image/photojpgd.jpg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-1">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-3">
<div class="droite">
»
</div>
</a>
</div>
</div>
<div class="itemCarousel"id="itemCarousel-3">
<div class="carousel"id="acarrusel-3">
<img src="./image/serveur.jpeg" alt="itemCarousel-2">
</div>
<div class="fleche">
<a href="#itemCarousel-2">
<div class="gauche">
«
</div>
</a>
<a href="#itemCarousel-1">
<div class="droite">
»
</div>
</a>
</div>
</div>
</div>
</body>
WhyMy page scrolls when I click on the chevrons and I don't know where is the problem in my code
The point of href="#foo" is to link to an element on the page and scroll directly do it.
You are presumably (you didn't include your CSS in your question) using :target to style that element. :target is designed so you can add additional styling to the element to draw more attention to it that it would get from just being at the top of the screen.
You appear to be trying to get the styling of the element linked to element without triggering the primary effect of linking to it.
You can't do that.
If you want a carousel, then use JavaScript. It's the right tool for the job.

CSS can't check for focus

I have the following code in html:
<nav class="box">
<div class="logo">
<button class="c-hamburger c-hamburger--htx linksbuendig">
<span>toggle menu</span>
</button>(...)
</div>
</nav>
<div class="relative box">
<div class="nav">
<ul>
<li>
Login
</li>
</ul>
</div>
and this in CSS:
.c-hamburger:focus ~ div.nav {
margin:0;}
so if the button is focused the div should change the margin. But it won't work, until i copy the code for the button 1 to 1 directly over the div with the class nav. Why does it so and what can I change? Just copy solves the problem until now, but then is the full page destroyed, because there're other elements in between etc.
JS or sth. like that is not allowed. Please only CSS resp HTML.
Beforehand: Thanks!

Clicking anchor tag doesn't position divs to the top of page

Having a problem with pretty simple website. It's a vertical scroll with a left side nav. When I click a menu item, it won't position the section to the top of the page. I've tried a few solutions from the community but it doesn't work with my setup.
Here's a jsfiddle: http://jsfiddle.net/U44Ut/
Here's a basic of the layout:
<div id=wrap">
<div id="left">
<div id="nav">
<ul>
<li>item 1</li>
</ul>
</div>
</div>
<div id="right">
<div id="content">
<div id="item1">CONTENT HERE</div>
</div>
</div>
</div>
Thoughts?
You're code is working properly, your problem is that the top of the elements you are linking to are not where you expect them to be.
This is the quick fix to your problem: http://jsfiddle.net/U44Ut/8/
I put <span id=""> tags around the text in your <h1> tags and linked to their id's. But you really should clean up your code.

Fit default icons into header button in jQuery Mobile

I'm trying to add a menu-style drop down button to the header of a mobile app created via jQuery Mobile, but I cannot find a way to fit the default 'gear' icon to the button. The following is the HTML page.
<div data-role="header">
<div data-role="popup" id="cfgMenu" data-theme="a">
<ul data-role="listview" data-inset="true" style="min-width: 210px;" data-theme="a">
<li data-role="divider" data-theme="a">Configura</li>
<li>Lingua
</li>
<li>Sci club
</li>
<li>Preferenze
</li>
</ul>
</div>
<h1>Title</h1>
</div>
</div>
With this HTML the result is the following:
If I add style="height:100%" to the <a> the result is the following:
What can I do to fit the icon into the image?
Just found that adding text everything is OK. But space in the header is limited, so I'd like to avoid this solution
For jQM 1.4 you use button classes instead of the data attributes:
DEMO

Something moves sidebar menu after putting table on a website

This menu on the left should be exactly next to that table at right, it's okay on other pages. No idea how to fix it.
(source: gyazo.com)
We need code, the image isn't sufficient
<div class="tooted" style="float:left;">
</div>
<div class="menu" style="float:right;">
</div>
<div style="clear:both;">
</div>
CSS
.tooted{width:50%;}
.menu{width:50%;}