We Keep Coding

How to set default link with javascript?

I try set a default link in a modal, but not working (I am very new in javascript).
This is my full code:
<button class="md-btn md-btn-success" id="openmodal" data-uk-modal="{target:'#my_id', keyboard: false, bgclose: false}" style="display:none !important;"></button>
<div class="uk-modal" id="my_id">
<div class="uk-modal-dialog">
<div class="uk-modal-header">
<div uk-grid class="uk-grid">
<div class="modal-block">
<h3>Project</h3>
<b>project description, lorem ipsum... instagram</b>
</div>
<div class="modal-block">
<h3>Terms</h3>
<b>terms description</b>
</div>
<div class="modal-block">
<h3>Cookies</h3>
<b>cookies description</b>
</div>
</div>
</div>
<div class="uk-modal-footer uk-clearfix">
<a id="default-link" uk-tooltip="{title: okay, i accept!; pos: bottom}" class="us--main-button uk-float-right entersite uk-modal-close" href="javascript:void(0)">Accept and enter</a>
<a id="dont-def" uk-tooltip="{title: I do not agree!; pos: bottom}" class="us--leave-button uk-float-right" href="https://google.com">Deny and leave</a>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#openmodal').trigger('click');
})
</script>
<script>
window.onload = function() {
document.getElementById("default-link").focus();
};
</script>
When I open the page in any browser, the default stated link will be the first (instagram)... Whats the wrong with this?

That code works when it comes to give the link focus, though if one hit enter (or click on it) nothing will happen since you've cancelled its action with href="javascript:void(0)"
Here is a sample that shows that the focus() does work.
Click "Run code snippet" and hit "Enter" and you'll get an alert.
window.onload = function() {
document.getElementById("default-link").focus();
};
<div class="uk-modal" id="my_id">
<div class="modal-block">
lorem ipsum... instagram
</div>
<div class="modal-footer">
<a id="default-link" class="uk-modal-close" href="javascript:alert('Accept')">Accept and enter</a>
<a class="uk-float-right" href="https://google.com">Deny cookies and leave</a>
</div>
</div>

I just now find out the really best solution for that, because the window.onload to slow, and when the site loading, the default link is over the first link in the current page...
So the best the html5 solution, very simple, and this really makes default from your any item, independently from the page or document loading:
<div autofocus>

Toggle display shows the hidden element for a second

I'm trying to show a hidden text on click of a button. But when I load the page, the text shows for a second and then disappears. Why would that happen?
<div class="container">
<p class="temp">This is temporary</p>
<button id="showme">Show</button>
</div>
$(document).ready(function() {
$(".temp").hide();
$("#showme").on("click", function() {
$(".temp").show();
});
});

Try to understand how the webpage loads. Your jquery is executed when the entire page is rendered with the associated CSS. So the browser displays your text for a second till it executes jquery to hide that text. So your browser needs to know that this text is hidden while parsing the html. You can do this by giving a CSS style to the text.
CSS:
.temp {
display: none;
}
HTML:
<div class="container">
<p class="temp">This is temporary</p>
<button id="showme">Show</button>
</div>
JS:
$(document).ready(function() {
$("#showme").on("click", function() {
$(".temp").show();
});
});

You should use inline style tag in <p> tag like this:
<p class="temp" style="display: none;">This is temporary</p>
instead of hiding it from jQuery!
$(document).ready(function() {
$("#showme").on("click", function() {
$(".temp").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="temp" style="display: none;">This is temporary</p>
<button id="showme">Show</button>
</div>

Constrain toggle effect

I've put this jQuery together, when the document is ready the div with a class of bio.read_more is hidden.
The default behaviour for the a tag is removed with e.preventDefault
When btn.expand_bio is clicked bio.read_more is displayed.
The only problem is all the bio.read_more divs are displayed? I only want the one that's related to expand. Can anyone help?
$(document).ready(function(){
$(".bio.read_more").hide();
$(".btn.expand_bio").click(function(e){
e.preventDefault();
$(".bio.read_more").toggle();
});
});
(update) Added HTML
<div class="bio intro">
<p>Intro paragraph</p>
<a class="btn expand_bio" href="#">Read more</a>
</div>
<div class="bio read_more">
<p>Expanded text here</p>
</div>
</div>

Use this as reference to the element being clicked.
$(document).ready(function() {
$(".bio.read_more").hide();
$(".btn.expand_bio").click(function(e) {
e.preventDefault();
$(this).closest('.bio.intro').next('.read_more').toggle();
});
});

jquery show only child

I have a problem : I use classes on a div for simplicity, I would like to show a hidden div after a click, but only on that div, the problem is it shows on all divs, and I can't seem to get it working, here is a jsfiddle with the problem : http://jsfiddle.net/cWNvT/
HTML:
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
<div class="left">
Edit
<div class="edit">
<p>edit here</p>
</div>
</div>
JavaScript:
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function() {
$('.left').children().show();
});
});​
Anyone have a solution for this ?

Try this working fiddle.
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).parent().children().show();
});
});
All I have done is use $(this).parent() instead of using your $(".left") selector.

Try finding the parent of the clicked element only, and using its children:
http://jsfiddle.net/cWNvT/1/
$(document).ready(function() {
$('.edit').hide();
$('.left a.edit-click').click(function(){
$(this).closest(".left").children().show();
});
});
​
$(".left") selects all elements with class .left in the document. $(this).closest(".left") finds the first parent of the clicked link that has class .left.

Change your code to this:
$('.left a.edit-click').click(function(){
$(this).next('.edit').show();
});
http://jsfiddle.net/cWNvT/3/

Javascript - jquery,accordion

<div id="wrapper">
<div class="accordionButton">Personal Information</div>
<div class="accordionContent">
Personal text
</div>
<div class="accordionButton">Experience</div>
<div class="accordionContent">
Experience information
</div>
<div class="accordionButton">Training</div>
<div class="accordionContent">
No skills
<div class="accordionButton">Career</div>
<div class="accordionContent">
Never had a job
</div>
<div class="accordionButton">Referers</div>
<div class="accordionContent">
None.
</div>
</div>
This code works how i want it to. It is a horizontal accordion. However, when it is loaded on my webpage, they content divs have to be hidden for my jquery to work.
Jquery:
$(document).ready(function() {
// When div is clicked, hidden content divs will slide out
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
// Close all divs on load page
$("div.accordionContent").hide();
});
If i don't hide the divs, all the divs display. Is there any way to display the 1st page without changing too much of my jquery or would i have to set different class names for the button and the content so that when a specified button is clicked, the affiliated content will slide out for that button div?

You can use jquery selector for first div and set it as show(). Something like :
$('div.accordionContent:first').show();

I think you have to try this:-
<script type="text/javascript">
$.fn.accordion = function(settings) {
accordion = $(this);
}
$(document).ready(function($) {
$('div.accordionContent').click(function() {
if($(this).next().is(":visible")) {
$(this).next().slideDown();
}
$('div.accordionContent').filter(':visible').slideUp();
$(this).next().slideDown();
return false;
});
});
</script>

Why not use slideToggle() instead of IF statements....

Try this very simple solution
HTML
<div class="accordion-container">
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
<div class="accordion-content">
<div class="accordion-title">Title</div>
<div class="accordion-toggle">Toggle content</div>
</div>
</div>
jQuery
$('.accordion-content .accordion-title').on('click', function(){
$(this).toggleClass('active');
$('.accordion-title').not($(this)).removeClass('active');
$(this).next().slideToggle();
$(".accordion-toggle").not($(this).next()).slideUp();
});