We Keep Coding

Autoscroll when div appears and when details/summary is clicked

I'm trying to figure out how to add autoscroll till the end of the page/div in 2 different situations as I'm new to JS.
1)When a div is appearing from display:none to block.
For example, here is when my alert appears and I want it to be fully shown. Is there a way to add in a piece of automatic code here? I made it mechanically so far.
document.querySelector('button').onclick = function() {
if(document.querySelector('select').value === "a") {
rightAlert.style.display = 'block';
wrongAlert.style.display = 'none';
window.scrollBy(0, 100);
}
When details/summary are clicked and expanded, with the traditional structure (Details, Summary, P)
Tried
document.querySelector('summary').onclick = function() {
window.scrollBy(0, 100);
};
but it didn't work.
Thanks a lot!

Change picture when click the button using z-index

I am trying to change picture when clicked the button using if else statement however kind of confused only two pictures are changing when clicked .
<script type="text/javascript">
function restack() {
var x=document.getElementById('blueberries');
var z=x.style.zIndex
if (z==10) z=20;
else if z=10;
x.style.zIndex=z;
else
i = 30;
}
</script>

Hide divs when another div is expanded?

I have 8 divs on my page. 4 at the top and 4 at the bottom. For the 4 divs at the top I have a piece of Javascript code that expands/unhides a div below them (see JSFiddle). I would like to make it so that when these divs are expanded the 4 divs at the bottom of the page hide. Then, when the div is unexpanded, the 4 divs at the bottom of the page show again.
Please see my JSFiddle: https://jsfiddle.net/44478c41/
I don't have much knowledge of Javascript but I had a fiddle around with my existing code to try and get it to work, I managed to hide the div but not the content within the div, nor was I able to get it to unhide again. Here is what I edited my code to:
$(document).ready(function() {
var $cont;
function tgl_conts(){
$('.static').stop().animate({height: 0},1200);
$cont.stop().animate({height:210},1200);
}
$('.tab_collapsable').on('click',function(){
var tabClass=$(this).attr('class').split(' ')[1];
$cont = $('.'+tabClass+':not(.tab_collapsable)');
var h = ($cont.height() === 0) ? tgl_conts() : ( $cont.stop().animate({height: 0},1200) );
});
});
Thanks a lot!

Here you go, you can either check the visibility of content divs or just track open/close via a flag
Here is the Fiddle
Handling via flag;
var bottomDivOpen=true;
function showHideBottomDiv(){
if(bottomDivOpen==true){
$(".static").hide();
bottomDivOpen=false;
}else{
$(".static").show();
bottomDivOpen=true;
}
}

Yet another solution:
$('.tab_collapsable').on('click',function(){
var tabClass = $(this).attr('class').split(' ')[1];
var h = $('.content.'+tabClass).height() ? 0 : 210;
$('.content').stop().animate({height: h},1200)
.not('.'+tabClass).stop().animate({height: 0},1200);
$('.static').stop().animate({height: h ? 0 : 250},1200);
});
JSFiddle

You can do something like this to retain animation effect on static divs.
$(document).ready(function() {
var $cont;
function tgl_conts(){
$('.content').stop().animate({height: 0},1200);
$cont.stop().animate({height:210},1200);
}
$('.tab_collapsable').on('click',function(){
var tabClass=$(this).attr('class').split(' ')[1];
$cont = $('.'+tabClass+':not(.tab_collapsable)');
if ($cont.height() === 0) {
tgl_conts();
$('.static').stop().animate({height: 0},1200);
} else {
$cont.stop().animate({height: 0},1200);
$('.static').stop().animate({height: 250},1200);
}
});
});

Toggle between displaying different html

When page loads I am doing some changes to the html of a element, I have a toggle button for this element but I have problems to make it work correctly.
What I am trying to do is followin:
When page is loaded the modified html will be displayed.
When user click on the toggle button I want the original html to be displayed with full text with slide effect.
When user click on the toggle button again I want it to display the modified html with slide effect.
I have almost made it to work, it looks like this
JSFiddle
Here is the code:
$(window).ready(function() {
var string = $('#object-full-description').html();
var place = string.indexOf('.', 800);
if (place >= 0)
{
$('#object-full-description').html(string.substring(0, place + 1));
}
$('#full-description-toggle').click(function() {
if ($('.toggled').length > 0) {
$('#object-full-description').slideToggle('slow', function() {
$('#full-description-toggle').removeClass('toggled');
place = string.indexOf('.', 800);
if (place >= 0) {
$('#object-full-description').html(string.substring(0, place + 1));
}
});
} else {
$('#object-full-description').slideToggle('slow', function() {
$('#full-description-toggle').addClass('toggled');
$('#object-full-description').html(string);
});
}
});
});
I would appreciate any kind of help!

See http://jsfiddle.net/dM7Vd/16/
Looks like you just need to add
$('#object-full-description').slideToggle('slow');
at the end of your function. You're hiding it but not re-showing it.

How can I make the height of a div bigger onclick of a button and then change back to it's original height when click again?

I have a div id="coding" set on height:300px on CSS.
when I click another div id="menu", I want #coding to change it's height to 800px. I managed to do that like this
<script>
function changec() {
document.getElementById('coding').style.height = "800px";
}
</script>
Now, when click the #menu again, I want the height to get back to it's original 300px value. Can someone help? The code is:
HTML
<div id="coding">
<div id="menu" onclick="changec()">≡</div>
...
</div>
CSS
#coding{
...
height:300px;
}

Simple check if the value is set - remove it (then CSS height will take over).
function changec() {
var xDiv = document.getElementById('coding');
if (xDiv.style.height == '')
xDiv.style.height = '800px'
else
xDiv.style.height = ''
}
Demo: http://jsfiddle.net/ygalanter/BLE6N/

one of the solution for your problem is as follows:
First count how many times you click on #menu
now depending on your expectation you can change the javascript as follows
<script type="text/javascript">
var count = 0;
function changec() {
count++;
if(count%2==1)
document.getElementById("coding").style.height = "800px";
else
document.getElementById("coding").style.height = "300px";
}
</script>

Another alternative solution is
<script type="text/javascript">
function changec() {
var currentheight = document.getElementById('coding').clientHeight;
if (currentheight == 300)
document.getElementById('coding').style.height = "800px";
else if (currentheight == 800)
document.getElementById('coding').style.height = "300px";
}
</script>

Not sure why you tagged jQuery since you didn't use it, but still...Considering the possibility that you are willing to use/learn it, I created a jsFiddle for it: http://jsfiddle.net/Tm2Hd/.
CSS:
#coding{
border:1px solid black; /*optional: Keep track of your div's expand*/
height:300px;
}
#coding.larger{
height:800px;
}
JS:
function changeHeight() {
if($('#coding.larger').length>0)
{
$('#coding').removeClass("larger");
}
else
{
$('#coding').addClass("larger");
}
}
HTML
<div id="coding">
<!--<div onclick="changeHeight()">≡</div>
Personally, I don't suggest using divs as clickable objects... Why don't you use buttons instead?
-->
<button onclick="changeHeight()">≡</button>
...
</div>
My solution to your problem is: Create a new class named larger, pointing to your div, and toggle between this and the original whenever you click the button.