I've wrote a simple accordion faqs list using jQuery, but looking for some feedback on ways to improve it better.
My mark-up looks something like this:
<ul class="faqs">
<li><h4>Question</h4>
<div class="answer">answer</div>
</li>
<li><h4>Question</h4>
<div class="answer">answer</div>
</li>
<li><h4>Question</h4>
<div class="answer">answer</div>
</li>
</ul>
My JS looks something like this:
var question = $('.faqs h4');
question.click(function() {
$(this).next('div').slideToggle('fast');
});
All .answer divs are set to display:none on page load, but if js is disabled, all .answer div would be shown by default.
Cheers
I'd suggest adding $(".answer").slideUp() so that only one accordion item can be open at a time:
var question = $('.faqs h4');
question.click(function() {
$(".answer").slideUp();
$(this).next('div').slideToggle('fast');
});
(Also, maybe add a little style, eg the :hover pseudo-class. Maybe add some other animations.)
Fiddle
I wonder, why to try yourself with something from scratch when there's so many good accordions out there ...
Did you try the Bootstrap Collapse?
http://twitter.github.com/bootstrap/javascript.html#collapse
Simple markup and you can use as part of the hole Bootstrap Framework, or simply use it independently from anything else (you need jQuery though)
Related
I have been looking for solution, but i don't find anything, that would suit me. I got a page with header and content divs. Content div is not visible. After clicking on item in nav menu, I want to hide header, and show chosen article. I achieved it, but when I try to get to article by url#name nothing happens.
"jsfiddle" wont be useful in this case, but i will paste it to show my code.
Is there different way to do it? Maybe somehow hide articles with code, then just change opacity, maybe use "addclass" from jquery? I don't really know, im mixed and stuck.
Thanks for help.
https://jsfiddle.net/edby86ta/8/
You can also do it in full css :
https://jsfiddle.net/edby86ta/11/
In this case, the hardest part is hiding it again. You'd have to have a "close" button directing to another (maybe nonexistant) anchor :
Close
You can apply very simple JS conditions to show and hide your articles based on the link, I`ve updated you JSfiddle.
https://jsfiddle.net/edby86ta/10/
$(function () {
//GET HASH FROM URL, CHECK IF ELEMENT EXISTS AND THEN SHOW IT
$(document).ready(function(){
var hash = window.location.hash;
if(hash.length){
$(hash).show();
}
})
$(".article-nav a").on("click", function () {
$(".main-article").hide();
console.log($(this).attr("id"));
$('#article-' + $(this).attr("id")).show();
});
});
article {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<nav>
<ul class="article-nav">
<li><a id="1" href="#article-1">Article 01</a></li>
<li><a id="2" href="#article-2">Article 02</a></li>
</ul>
</nav>
</header>
<div id="content">
<article id="article-1" class="main-article">Article 01 Lorem ipsum</article>
<article id="article-2" class="main-article">Article 02 Lorem ipsum</article>
</div>
<footer></footer>
Advice: Be aware that the user can change the hash as he wants, injecting anything to your selector, you should check the hash before using it.
I am using materializecss to create tabs. So I am at point where I want to detect which tab is opened and then configure the UI using Javascript or Jquery.
E.g
if (tab.index == 0 || 'brands'){
//Configure some UI
}else if(tab.index == 1 || 'products'){
//Configure some UI
}
The HTML part looks like this:
<ul class="tabs blue-grey darken-2">
<li class="tab col s6"><a class="active" href="#brands" style="color: white;">Brands</a></li>
<li class="tab col s6"><a style="color: white;" href="#products">Products</a></li>
</ul>
I already did manually change tab on button click like this:
$('ul.tabs').tabs('select_tab', 'products');
but do not know how to achieve the question part. I hope to get some help :) I went through many similar questions but didn't find solution. If the question is somehow dublicate please comment.
There is an onShow callback. See http://materializecss.com/tabs.html
This code is untested and there is no simple example of how to use onShow at the vendor website but I hope it will show you the way. 'some_param' is where you need to know the attributes of the tab object - maybe it has an index. If not then maybe you could add differentiating classes to the first and other tabs and use jquery .hasClass(classname') to decide what happens next.
$(document).ready(function(){
$('ul.tabs').tabs('select_tab', 'tab_id').onShow(function(selectedTab){
if (selectedTab.some_param === some_val){
...do something
}
});
});
I've been digging around on how to do it, but didn't find any solution which would fulfill my needs.
Got a basic layout of my page with menu on the left, separate div for header and a div in the middle where all the content should be displayed when one of the menu buttons is selected.
I'd like to change the content only of the "content" div dynamically without reloading the page when one of the menu buttons is pressed.
I've managed to do it as per below with jquery:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#nav ul li a').click(function(){
$('#main').load('contents.html #' + $(this).attr('href'));
return false;
});
});
The menu :
<nav id="nav">
<ul class="menu">
<li class="menu1"></li>
<li class="menu2"></li>
<li class="menu3"></li>
<li class="menu4"></li>
<li class="menu5"></li>
</ul>
</div>
</nav>
contents.html file sample:
<div id="menu1">
<h2>Menu1</h2>
<p>Menu1 page contents</p>
</div>
So when menu1 button is pressed I'm able to change the content of main div to reflect the relevant data - this works.
My questions are:
1) is this the correct way on how to do it ? If not what would you recommend ?
2)I want to display more advanced stuff not only text (e.g What if I want to have another jquery in the div-id="menu1" ? I've tried it and it didn't work.)
P.S - I'm just a beginner so maybe I've missed something basic - but couldn't fix it by myself.
Thanks in advance!
Peter
I think there are a number of ways to achieve what you want. It depends on the nature of the content you want to load.
If there isn't masses of it, you could load it all onto the page on page load within different div's and then just show and hide the relevant div when clicking the menu items. (have a look at twitter bootstrap for some implementations, things like tabbed browsing).
If you do just have text, you could use ajax to load in the data from an external file w3schools.com.
Alternatively as mentioned in a comment above, you could create a single page application using something like angular.js, knockout.js etc.
Hope that helps.
At first I'm using JQuery Mobile. I have already investigated about loading HTML inside a div but I having some problems.
The main idea is that I have 3 differents menus (which are lists) and each one stored in a HTML file generated by the server. /Menu1.html, /Menu2.html, /Menu3.html. It has to be this way because menus could change dynamically.
So, the menus looks like this:
<ul>
<il><a href="whatever1> Option1 </a></li>
<ul>
<il><a href="whatever1> Option1.1 </a></li>
</ul>
<il><a href="whatever2> Option2 </a></li>
</ul>
I'm doing it this way:
<div id="menuview">
</div>
<script type="text/javascript">
$("#menuview").load("data/menu1.html");
</script>
And it is loading the list, right, but without css. So What I'm seeing is just the list and not a JQM linked list view like the demo here: http://demos.jquerymobile.com/1.4.0/listview/
If I copy the menu1.html inside the div manually it works perfectly.
I'm not just asking for a solution, maybe is there any better way to do this and I don't know it.
Thanks in advance!
When adding any items dynamically, you need to initialize them manually.
Inside each menu you have, add initialization function.
<ul>
<!-- elements -->
<script>
$(function () {
$("ul").listview();
});
</script>
</ul>
Note that nested listview is removed from jQM 1.4.
To create a nested listview, check this official demo.
I have 11 elements with long description of each element of them. I decided to display the elements on the sidebar and the description of each one of them will be displayed on the body directly when the user clicks on the element.
I came with a solution similar to this ONE
but the problem with this one is put the content (or description) inside the javascript code, and I want the description be on the HTML code to make it later on flexible for changes by the admin after putting the data including the description of these elements on the database instead of hard-coded style.
Therefore, how can I do that?
You can try this way
<div id="menu">
<ul>
<li id="a">item a
<div id="contentA" style="display:none">Description of item A</div>
</li>
<li id="b">item b
<div id="contentB" style="display:none">Description of item A</div>
</li>
</ul>
</div>
<div id="content"></div>
<script type="text/javascrip">
$(document).ready( function () {
$('#a').click(function() {
$('#content').html($('#contentA').html());
});
$('#b').click(function() {
$('#content').html($('#contentB').html());
});
});
<script>
I updated your example, it now uses hidden divs inside the clickable menu items, and on li click it finds the menu description and displays it.
This method does not depend on ids and degrades more gracefully (except if the client doesn't support JS but supports CSS display).
Your description is a bit unprecise, but if I get it right your could use IDs for the description text and fade them in/out with jQuery.
http://jsfiddle.net/PajFP/14/ (updated)