We Keep Coding

Function to make the code smaller

Im trying to learn javascript mostly by trial and error, i have created a dropdown menu which probably has ALOT of unnessecary code in it.. How do i create this the right way? any pointer would be appreciated!
JS:
function dropdown() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger.style.display == "none") {
dropdownTrigger.style.display="block";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="none";
}
else {
dropdownTrigger.style.display="none";
}
}
function dropdown2() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger2.style.display == "none") {
dropdownTrigger.style.display="none";
dropdownTrigger2.style.display="block";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="none";
}
else {
dropdownTrigger2.style.display="none";
}
}
function dropdown3() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger3.style.display == "none") {
dropdownTrigger.style.display="none";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="block";
dropdownTrigger4.style.display="none";
}
else {
dropdownTrigger3.style.display="none";
}
}
function dropdown4() {
var dropdownTrigger = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (dropdownTrigger4.style.display == "none") {
dropdownTrigger.style.display="none";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="block";
}
else {
dropdownTrigger4.style.display="none";
}
}
function dropdownAll() {
var ddaText = document.getElementById("dda");
var dropdownTrigger1 = document.getElementById("dd");
var dropdownTrigger2 = document.getElementById("dd2");
var dropdownTrigger3 = document.getElementById("dd3");
var dropdownTrigger4 = document.getElementById("dd4");
if (ddaText.innerHTML == "Open all"){
ddaText.innerHTML = "Hide all";
dropdownTrigger1.style.display="block";
dropdownTrigger2.style.display="block";
dropdownTrigger3.style.display="block";
dropdownTrigger4.style.display="block";
}
else {
ddaText.innerHTML = "Open all";
dropdownTrigger1.style.display="none";
dropdownTrigger2.style.display="none";
dropdownTrigger3.style.display="none";
dropdownTrigger4.style.display="none";
}
}
HTML:
<div class="left-menu">
<p>Menu</p>
<br>
+Menu 1
<ul id="dd" style="display:none;">
<li>item 1:1</li>
<li>item 1:2</li>
<li>item 1:3</li>
<li>item 1:4</li>
</ul>
+Menu 2
<ul id="dd2" class="dropdown" style="display:none;">
<li>item 2:1</li>
<li>item 2:2</li>
<li>item 2:3</li>
<li>item 2:4</li>
</ul>
+Menu 3
<ul id="dd3" class="dropdown" style="display:none;">
<li>item 3:1</li>
<li>item 3:2</li>
<li>item 3:3</li>
<li>item 3:4</li>
</ul>
+Menu 4
<ul id="dd4" class="dropdown" style="display:none;">
<li>item 4:1</li>
<li>item 4:2</li>
<li>item 4:3</li>
<li>item 4:4</li>
</ul>
Open all
</div>
is it possible to create function that increases or some kind of loop for this?

Maybe consider something along the lines of this. This function uses a ternary operator to check if the display value is set to block or none, and switches it accordingly.
<button href="#" onclick="toggleDisplay(document.getElementById('dd'))"> +Menu 1</button>
<ul id="dd" style="display:none;">
<li>item 1:1</li>
<li>item 1:2</li>
<li>item 1:3</li>
<li>item 1:4</li>
</ul>
<script>
function toggleDisplay(el){
el.style.display === 'none' ? // Is it invisible?
el.style.display = 'block' : // Then use this
el.style.display = 'none' // If not the use this
}
</script>
Edit: Misread; don't use a <select> element.
And I will actually better explain what is happening here. The function toggleDisplay(el) takes an element as a parameter.
<button onclick=toggleDisplay( <your element goes here> )>
Now the element that we are passing has a style object that we can access and make changes to. You can reference that here w3school.
Edit 2: Here's another solution that attaches an event to elements in an HTML class list. The events toggle the current element's direct sibling element. You can use this with any number of different combinations that you might need it for. This way you won't need any inline JavaScript in your HTML and you won't have to insert each element individually.
Myself and most other people would recommend trying out jQuery for this kind of DOM traversing and event handling. The DOM is absolutely terrible in terms of browser compatibility and the headache involved with traversal. jQuery solves a lot of that headache.
// this returns a list of your buttons with the class name 'toggle-button'
var buttons = document.getElementsByClassName('toggle-button')
// here we iterate over them to individually modify
for (var i = 0; i <= buttons.length-1; i++){
// here we take the current button and we add an event listener to it
buttons[i].addEventListener('click', function(){
// 'this' refers to buttons[i] that we are targeting with our event
var el = this.nextElementSibling // nextElementSibling is the ul
el.style.display === 'none' ? // Is it invisible?
el.style.display = 'block' : // Then use this
el.style.display = 'none' // If not then use this
})
}
<button class="toggle-button"> +Menu 1</button>
<ul id="dd0" style="display:none;">
<li>item 1:1</li>
<li>item 1:2</li>
<li>item 1:3</li>
<li>item 1:4</li>
</ul>
<button class="toggle-button"> +Menu 1</button>
<ul id="dd1" style="display:none;">
<li>item 2:1</li>
<li>item 2:2</li>
<li>item 2:3</li>
<li>item 2:4</li>
</ul>
<button class="toggle-button"> +Menu 1</button>
<ul id="dd2" style="display:none;">
<li>item 3:1</li>
<li>item 3:2</li>
<li>item 3:3</li>
<li>item 3:4</li>
</ul>

You could use JQuery,
<a class="menu1" href="#"> +Menu 1</a>
<ul id="dd" style="display:none;">
<li>item 1:1</li>
<li>item 1:2</li>
<li>item 1:3</li>
<li>item 1:4</li>
</ul>
<a class="menu2" href="#"> +Menu 2</a>
<ul id="dd2" style="display:none;">
<li>item 2:1</li>
<li>item 2:2</li>
<li>item 2:3</li>
<li>item 2:4</li>
</ul>
And here's the JQuery code:
$(document).ready(function() {
$(".menu1").toggle(function() {
function() {$("#dd").css("display", "block");},
function() {$("#dd").css("display", "none");}
});
$(".menu2").toggle(function() {
function() {$("#dd2").css("display", "block");},
function() {$("#dd2").css("display", "none");}
});
});

A CSS only solution to your current problem
The problem your are currently trying to solve can be achieved without the use of javascript at all, and would most likely be a cleaner and more scalable solution in the end.
The theory:
We use a div which wraps the menu elements, and whenever this is hovered (the :hover property), we show the menu. We can even add a nice little animation to this if we care.
<style>
div.menuopener{
display: block;
}
ul.submenu {
/*display: none; USE THIS IN STEAD TO LOOK LIKE YOUR EXAMPLE*/
/* All of this is to make it look nice, and is not needed: */
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.8s;
-moz-transition: max-height 0.8s;
transition: max-height 0.8s;
}
/*Here we select all elements of class menuopener when it is hovered, and then
select the sub element ul of class submenu and apply styles to it */
.menuopener:hover ul.submenu{
/*display: block; USE THIS IN STEAD TO LOOK LIKE YOUR EXAMPLE*/
/* max-height is just for the transition, and not needed*/
max-height: 200px;
}
</style>
<div class="menuopener">
<p>Menu 1</p>
<ul class="submenu" >
<li>item 1:1</li>
<li>item 1:2</li>
<li>item 1:3</li>
<li>item 1:4</li>
</ul>
</div>
<div class="menuopener">
<p>Menu 2</p>
<ul class="submenu">
<li>item 2:1</li>
<li>item 2:2</li>
<li>item 2:3</li>
<li>item 2:4</li>
</ul>
</div>
<div class="menuopener">
<p>Menu 3</p>
<ul class="submenu">
<li>item 3:1</li>
<li>item 3:2</li>
<li>item 3:3</li>
<li>item 3:4</li>
</ul>
</div>
<div class="menuopener">
<p>Menu 4</p>
<ul class="submenu">
<li>item 4:1</li>
<li>item 4:2</li>
<li>item 4:3</li>
<li>item 4:4</li>
</ul>
</div>
Hope this helps a bit. It might not be the perfect solution, but it should clean up your current situation and provide a much smaller, and easier to maintain, codebase.
I do understand that what you are after is to learn javascript, but there are other, more fun, opportunities to do this other than opening menus, like https://projecteuler.net/ or https://www.codingame.com/

NO error display but cant slideUp();

I have this slide up and slide down. I can slide down the child on click but cant slide up when click again.
JavaScript
jQuery("#all li").on("click", function(e) {
e.preventDefault();
var parent = jQuery(this);
var father = parent.data("clicked", true);
var child = parent.find("ul");
var x = child.on(":visible");
if (parent.is(":visible")) {
child.slideDown("fast");
} else {
child.slideUp("fast");
}
});
HTML
<nav>
<ul id="all">
<li>Link 1</li>
<li>Link 2
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
</ul>
</li>
<li>Link 3
<ul>
<li>Sub-Link 1</li>
<li>Sub-Link 2</li>
<li>Sub-Link 3</li>
<li>Sub-Link 4</li>
</ul>
</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
</nav>

It seems to me, based on your posted script and markup, that the parent is always visible. This means the if statement has essentially no effect. Altering it to check if the child is visible may help:
$('#all li').on('click', function() {
var parent = $(this);
var child = parent.find('ul');
if(child.is(':visible')){
$(child).slideUp('fast');
} else {
$(child).slideDown('fast');
}
});
Fiddle Demo

To achieve your expected result, use slideToggle()
JS:
jQuery("#all li").on("click", function(e) {
e.preventDefault();
var parent = jQuery(this);
var father = parent.data("clicked", true);
var child = parent.find("ul");
var x = child.on("visible");
if (parent.is("visible")) {
child.slideDown("fast");
} else {
child.slideToggle("fast");
}
});
http://codepen.io/nagasai/pen/jAkjBd

See more and see less button

Here's a script that shows 4 items each time a button is clicked. What i need is to change the text of the button after a click to "show even more" and then change to "show less" at the end when all items shown. I tried to add this:
if (nowShowing >= numInList) {
$('.partners__button__a').toggle(function() {
$(this).text('Show More');
}, function() {
$(this).text('Show Less');
button.show();
});
}
but it's not working the way I need.
And also how to add a reverse function to hide items?
Thank you.
$(document).ready(function() {
var list = $(".partners__ul li");
var numToShow = 4;
var button = $(".partners__button__a");
var numInList = list.length;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function() {
var showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = list.filter(':visible').length;
});
});
.partners__ul {
list-style: none;
padding: 0;
margin: 0;
}
.partners__ul li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul class="partners__ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
<button class="partners__button__a">Show More</button>
</div>

I did something different. Used two buttons but instead of one just to hide and show at the same time when half content is visible. Not sure whether you need it this way, just thought about making it more functional.
$(document).ready(function() {
var list = $(".partners__ul li");
var numToShow = 4;
var button = $(".partners__button__a");
var buttonLess = $(".partners__button__a_less");
var numInList = list.length;
var nowShowing = 4;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function() {
var showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();
nowShowing = list.filter(':visible').length;
if(numInList === nowShowing) {
$(this).hide();
buttonLess.text('Show Less')
} else if(nowShowing > numToShow) {
$(this).text('Show Even More');
buttonLess.show();
}
});
buttonLess.click(function() {
var showing = list.filter(':visible').length;
list.slice(showing - numToShow, showing).fadeOut();
nowShowing = nowShowing - numToShow;
if(numToShow === nowShowing) {
$(this).hide();
button.text('Show More');
} else if(nowShowing < numInList) {
$(this).text('Show Less');
button.show();
}
});
});
.partners__ul {
list-style: none;
padding: 0;
margin: 0;
}
.partners__ul li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul class="partners__ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
<button class="partners__button__a">Show More</button>
<button class="partners__button__a_less" style="display:none">Show Less</button>
</div>

Getting the text to change is easy enough, the simplest way would be to add this to the bottom of your button's click handler:
if(nowShowing == numInList){
$(this).text("Show less");
}
else{
$(this).text("Show even more");
}
As for the second item of showing less, you could add this (agin in the click handler)
if(showing < numInList){
list.slice(showing - 1, showing + numToShow).fadeIn();
}
else{
list.slice(showing - numToShow, numInList).fadeOut();
}
From here, you need to handle the fact that once you've shown everything and you start being able to show less, you need some form of boolean to indicate if we're currently in the state of "showing" or "hiding".
This then presents another problem! As you're fading in and out the :visible state will not be correct until after the fade has completed. Therefore you should defer the functionality using an overload of fadeIn / fadeOut which takes a callback.
The finished code can be seen below.
$(document).ready(function() {
var list = $(".partners__ul li");
var numToShow = 4;
var button = $(".partners__button__a");
var numInList = list.length;
var isShowing = true;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function() {
var showing = list.filter(':visible').length;
if(isShowing){
list.slice(showing - 1, showing + numToShow).fadeIn(100,onFadeComplete);
}
else{
list.slice(showing - numToShow, numInList).fadeOut(100,onFadeComplete);
}
});
function onFadeComplete(){
var nowShowing = list.filter(':visible').length;
if(nowShowing == numInList && isShowing){
isShowing = false;
button.text("Show less");
}
else if(isShowing){
button.text("Show even more");
}
if(nowShowing == numToShow){
button.text("Show more");
isShowing = true;
}
}
});
.partners__ul {
list-style: none;
padding: 0;
margin: 0;
}
.partners__ul li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul class="partners__ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
<button class="partners__button__a">Show More</button>
</div>

how to set number pagination [div pagination jquery system]

Hy I have following tutorial pagination jquery system
This my code :
$(document).ready(function() {
var show_per_page = 1;
var number_of_items = $('#list').children('li').size();
var number_of_pages = Math.ceil(number_of_items / show_per_page);
$('body').append('<div class=controls></div><input id=current_page type=hidden><input id=show_per_page type=hidden>');
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
var navigation_html = '<a class="prev" onclick="previous()">Prev</a>';
var current_link = 0;
while (number_of_pages > current_link) {
navigation_html += '<a class="page" onclick="go_to_page(' + current_link + ')" longdesc="' + current_link + '">' + (current_link + 1) + '</a>';
current_link++;
}
navigation_html += '<a class="next" onclick="next()">Next</a>';
$('.controls').html(navigation_html);
$('.controls .page:first').addClass('active');
$('#list').children().css('display', 'none');
$('#list').children().slice(0, show_per_page).css('display', 'block');
});
function go_to_page(page_num) {
var show_per_page = parseInt($('#show_per_page').val(), 0);
start_from = page_num * show_per_page;
end_on = start_from + show_per_page;
$('#list').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
$('.page[longdesc=' + page_num + ']').addClass('active').siblings('.active').removeClass('active');
$('#current_page').val(page_num);
}
function previous() {
new_page = parseInt($('#current_page').val(), 0) - 1;
//if there is an item before the current active link run the function
if ($('.active').prev('.page').length == true) {
go_to_page(new_page);
}
}
function next() {
new_page = parseInt($('#current_page').val(), 0) + 1;
//if there is an item after the current active link run the function
if ($('.active').next('.page').length == true) {
go_to_page(new_page);
}
}
.controls a{
padding:3px;
border:1px solid gray;
margin:2px;
color:black;
text-decoration:none
}
.active{
background:darkblue;
color:white !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id=list>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
My quetion is how display just 4 number in pagination, for example :
I have 10 datashow_per_page = 1;display number in pagination 1,2,3,4 next and if I'm click next display number 5,6,7,8 next, prev 9,10
Thanks

JavaScript: Slide a UL down to last element

Can't think how best to do this. Thought it would be a simple show/hide but it dosn't seem as simple as that.
There is a UL with an indeterminable amount of items in it. It needs to be able to show the first 10 but no more unless a 'show more' button is clicked. When the 'show more' button is clicked it will expand the list open to show the complete list.
http://jsfiddle.net/kbUhW/
Interested to see how this is achieved.

Here is an example: http://jsfiddle.net/WqxGf/
JS:
count = 0;
$('ul li').hide();
$('ul').children().each(function(){
if(count >= 10) return;
$(this).show();
count++;
})
$('.slide').click(function(){$('ul li').show('blind');})
HTML:
<ul>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
<li>Item Six</li>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
<li>Item Six</li>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
<li>Item Six</li>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
<li>Item Six</li>
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five</li>
<li>Item Six</li>
</ul>
<a href="#" class='slide'>Slide Down</a>

All the other answers use jQuery, but your question didn't actually specify it. So here's one way to do it with plain JavaScript. Let's assume your <ul> has the ID foo, your "reveal" link has the ID reveal, and that there's a class hide with display: none. Then we have:
(function getChildNodes(id, num) { // ID of element, number to show
var obj = document.getElementById(id),
children = obj.childNodes,
elemcounter = 0;
for (var i = 0; i < children.length; i++) { // loop all children
if (children[i].nodeType === 1) { // examine elements only
elemcounter++;
if (elemcounter > num) { // element number in range to hide?
children[i].className = 'hide';
}
}
}
}('foo', 3)); // id foo, show 3
document.getElementById('reveal').onclick = function() { // handle click
var items = document.getElementsByTagName('li');
for( var i = 0; i < items.length; i++ ){ // for all list elements...
var tempclass = items[i].className;
// if the class is "hide", unhide
items[i].className = tempclass === 'hide' ? '' : tempclass;
}
}
Of course there are many other ways to do this more thoroughly -- and this one doesn't even slide. jQuery does make life a bit easier.
Here's the working example: http://jsfiddle.net/redler/jsQ47/

Here's with the slide down effect:
http://jsfiddle.net/deNzh/
That's what you're looking for, right?

you could assign the first ten < li >s a class like < li class="always_show">Stuff goes here< /li > and then make a script that hides all, shows the "always_show" class and waits for a button click to show the whole thing.
might look something like:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
$("#listorama").hide();
});
$(function(){
$(".always_show").show();
});
$(function(){
$("#show_all").click(function(){
$("#listorama").show();
});
});
</script>
<ul id="listorama">
<li class="always_show"></li>
<li class="always_show"></li>
<li class="always_show"></li>
<li class="always_show"></li>
<li class="always_show"></li>
<li class="always_show"></li>
<li class="always_show"></li>
<li class="always_show"></li>
<li class="always_show"></li>
<li class="always_show"></li>
<li>stuff to hide first</li>
<li>stuff to hide first</li>
<li>stuff to hide first</li>
<li>stuff to hide first</li>
<li>stuff to hide first</li>
</ul>
<button id="show_all">Show All</button>
Hope this helps!
Andy

function toggleListDisplay (list, cap) {
cap = parseInt(cap);
if (cap == null || cap < 0) { return; }
var elements = $(list).children();
if ($(elements[cap]).css('display') == 'none') {
// means we need to expand the list
elements.each(function(ind, ele) {
if (ind >= cap) { $(ele).slideDown(); }
});
$('.slide').html('Slide Up');
} else {
// means we need to shorten the list
elements.each(function(ind, ele) {
if (ind >= cap) { $(ele).slideUp(); }
});
$('.slide').html('Slide Down');
}
}
$('.slide').click(function(){
toggleListDisplay('#tester', 10);
})
toggleListDisplay('#tester', 10);
JSFiddle: http://jsfiddle.net/WqxGf/7/

I don't know why the others feel like making such a simple task more complicated than it is, but here is a much easier, shorter, and simpler way of achieving this:
$("a").click(function() {
var ul = $("#myid");
ul.animate({"height": ul[0].scrollHeight}, 1000);
});
Example: http://jsfiddle.net/kbUhW/13/