I have the following sample list. I want to make it collapsible. Please suggest.
<div class="section">
<h2> Accounts:<br />E-interest Certificates</h2>
<ul> <li>Housing Loan</li>
<li>Education Loan</li>
<li>Deposit Accounts</li>
</ul>
</div>
Please refer the below link. I think it's works for you.
jsfiddle.net/VNkM2/2/
Consider using bootstrap accordions, there are a few examples on this website.
Related
I'm creating a simple notes SPA for my portfolio and i'm wondering what would be the correct HTML tags to use while creating the sidebar. I was using lists like everybody else but after i read an article about how listless navbars are better to SR (screen reader) users, i'm thinking about said technique, so instead of this:
<nav>
<ul>
<li>Home</li>
<li>About</li>
<li>Help</li>
<li>Contact</li>
</ul>
</nav>
We have this:
<div>
<a>Home</a>
<a>About</a>
<a>Help</a>
<a>Contact</a>
</div>
But then again, the navbar i'm creating does not technically includes links, but more like actions, like this:
/* Clicking shows saved notes */
<div class="nav-item">
<div class="nav-item__inner-ctr">
<i class="note-icon"></i>
<span>Notes</span>
</div>
</div>
/* Queries through saved notes */
<div class="nav-item">
<div class="nav-item__inner-ctr">
<i class="search-icon"></i>
<span>Search</span>
<div>
</div>
You get the point. So what should i use to group these elements? Thanks for your help in advance and sorry for the long post.
Is it a set of navigation links? Use a nav element.
Is it a list of things? Use an unordered or ordered list.
Is it something that the user is supposed to click on which isn't a link? Use a button element.
Is it multiple of these things? Combine multiple of these things.
I am new in web page design. I made a web site in html and css. I did not use wordpress or any kind of canned web designing site.
This kind of code does not work in mobiles. This is part the code in my website.
<nav>
<ul>
<li> Home </li>
<li> Flowers </li>
</ul>
</nav>
I researched, and the code that I see is this:
<li>Contact</li>
Can somebody tell me what "#" means?
What can I do to make my links suitable for tablets and mobiles?
Thank you in advance to anybody who can help me.
Try
<nav>
<ul>
<li> Home </li>
<li> Flowers </li>
</ul>
</nav>
also add css
a {display:block;}
I am trying to add navigation to different sections of a page. However, it seems that's not working... I have made plenty of research, but I really cannot get why this code is not working.
Just to note I am a very beginner in front-end development.
This is the navigation:
<nav>
<ul class="menu">
<li class="menu">About me</li>
</ul>
</nav>
and this is where I try to navigate the user:
<section id="about">
<h1>About me</h1>
<p>some text about me</p>
</section>
Is there is something that I am missing?
Here is the entire code in codepen.
Thanks in advance :)
I just thought to copy/paste my code in codepen and there it works. So, the problem happens when I am actually trying to see the code on the browser.
I'm building this menu with an <ul> tag, that will have a title and then the correspondent menus. I wanted to know how is the best practice with this kind of task and SEO too.
I though about:
<ul>
<li><h2>Books</h2></li>
<li>Portuguese</li>
<li>Italian</li>
<li><h2>Movies</h2></li>
<li>Indonesia</li>
<li>Thailand</li>
</ul>
and:
<h2>Books</h2>
<ul>
<li>Portuguese</li>
<li>Italian</li>
</ul>
<h2>Movies</h2>
<ul>
<li>Indonesia</li>
<li>Thailand</li>
</ul>
Is there a better approach? If not, which of these two is better, and why?
The second way because the first one will be rendering the h2 element inside of the unordered list. Another reason is that the second one is just cleaner and easier to manage what you have.
Mix of both is better:
<ul>
<li>
<h2>Books</h2>
<ul>
<li>Portuguese</li>
<li>Italian</li>
</ul>
</li>
<ul>
It's a lot easier to do menu more interactive this way. Take a look here.
w3 html validator will tell me that this is wrong:
<a href="http://www.bla.com>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</a>
in order to get a validated as HTML 4 strict (or just for writing things correctly)
What is the better way to write it:
no div's and ul's - just span's with classes that I need to design:
<a href="http://www.bla.com>
<span class="div">something</span>
<span class="ul">
<span class="li">first</span>
<span class="li">second</span>
</span>
</a>
without <a>
<div id="actAsLink" onclick="javascript:window.open('http://www.bla.com')>
<div>something</div>
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
=========================
sorry that the code doesn't look at its best - I had troubles handling the "code sampler" on this website.
I vote for option 1: Anchor + descriptive class names:
The link will work, even when JavaScript or pop-ups are disabled. (this is the most important feature to me.)
The class attributes describe their role, as a substitute for the <ul>, <li> elements. These elements can be styled using CSS.
Your structure looks a bit odd though: Why do you want to nest a list in an anchor?
Really you should have <a> tags inside each of the div, ul and li tags:
<div></div>
<ul>
<li>first</li>
<li>second</li>
</ul>
This is valid markup, but obviously with the downside that you have three links instead of one. I'm not sure why you want to have a list inside a link though - it's more common to see a list of links.