We Keep Coding

How to close accordion after refreshing browser

[Accordion open after refresh] (https://i.stack.imgur.com/a4Qwr.png)
If I refresh my browser the accordion is expanding automatically, If I click any one accordion it shrinks.
Jquery Code:
$(document).ready(function(){
$(".accordion h1").click(function(){
var id = this.id; /* getting heading id */
/* looping through all elements which have class .accordion-content */
$(".accordion-content").each(function(){
if($("#"+id).next()[0].id != this.id){
$(this).slideUp();
}
});
$(this). next(). toggle(); /* Selecting div after h1 */
});
});
Expectation is, If I refresh all the accordions should shrink.

I do not know your html logic, but I suggest that you use jQuery toggleClass.
$(document).ready(function(){
$(".accordion h1").click(function(){
$(this). next(). toggleClass("accordion-content"); /* Selecting div after h1 */
});
});
.accordion-content {
width: 500px;
height: 500px;
background: #ccc;
}
<div class="accordion">
<h1 id="tab_1">tab 1</h1>
<div attr_id="tab_1" class="accordion-content1">
</div>
</div>
<div class="accordion">
<h1 id="tab_1">tab 2</h1>
<div attr_id="tab_1" class="accordion-content1">
</div>
</div>

how toggle all div tags

how? when click the .button, hide all .body div tags and show just closest .body tag div
my codes first one works, but when click the .button, show .body, but when click again, does't toggle ( show / hide ) that, any more?
How to do it properly?
Edit : how to change .button > span icon? ( positive or negative )
Edit : jQuery(this).find('positive').toggleClass('negative'); ?
Edit (saitho): JSFiddle: https://jsfiddle.net/nL4sxbj0/2/
HTML
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="positive"></span>
</a>
</div>
<div class="body">
</div>
</div>
CSS
.body {
display:none;
}
.button .positive,
.button .negative {
width:36px;
height:36px;
float:right;
display:block;
cursor:pointer;
}
.button .positive {
background:url('../img/icon-del.png') no-repeat center center / 18px;
}
.button .negative {
background:url('../img/icon-opn.png') no-repeat center center / 18px;
}
JQUERY
jQuery('.button').on('click' ,function(e) {
e.preventDefault(); // Is this necessary? for
jQuery('.body').hide(); // Problem is hear i think
jQuery(this).closest('.box').find('.body').toggle();
});
Picture

add class iconbtn to button span
<div class="box">
<div class="header">
<a href="#" class="button">
<span class="iconbtn positive"></span>
</a>
</div>
<div class="body">
</div>
jQuery('.button').on('click' ,function(e) {
e.preventDefault();
var box = jQuery(this).closest('.box');
var closestBody = box.find('.body');
jQuery('.body').not(closestBody).hide(); // Hide all except above div
jQuery(closestBody).toggle(); // if visible hide it else show it
jQuery('.iconbtn').removeClass('negative').addClass('positive');
var iconBtn = box.find('.iconbtn');
if (jQuery(closestBody).is(':visible')) {
iconBtn.removeClass('positive').addClass('negative');
} else {
iconBtn.removeClass('negative').addClass('positive');
}
});
jsFiddle Link

The issue is that you have:
jQuery('.body').hide();
in your click callback, that means the body div is first being hidden and then toggle works as it should - it shows the div. There is no way it can hide it though, as before toggle you always first hide the div
Remove this line and it should work, check it here: JS Fiddle

Five star rating functionality

How can I achieve a five star rating functionality using css.
I have some html:
<span class="rate-this-stars">
<h5>Rate this page</h5>
<ol class="rate-this-stars-list">
<li class="star" value="5"></li>
<li class="star" value="4"></li>
<li class="star" value="3"></li>
<li class="star" value="2"></li>
<li class="star" value="1"></li>
</ol>
</span>
And some additional css which gives me this:
I then have a css hover state which swaps the grey star with a pink star:
span.stars ol li:hover {
background-image: url(../images/starHover.png);
}
Output:
So obviously this will only effect the star I hover over. But I was wonder How would I be able to highlight star 1, 2, 3, and 4 when i hover over star 4. So highlight all the stars that trial the selected.
I also want to be able to keep the stars pink if a click event is triggered. I want to basically do this with css and no javascript.
My css skills are a bit rusty. Any suggestions on how to achieve this functionality.

I Got This
Javascript to get the ratings
$(document).ready(function() {
$("form#ratingForm").submit(function(e)
{
e.preventDefault(); // prevent the default click action from being performed
if ($("#ratingForm :radio:checked").length == 0) {
$('#status').html("nothing checked");
return false;
} else {
$('#status').html( 'You picked ' + $('input:radio[name=rating]:checked').val() );
}
});
});
DEMO1
Using Css DEMO2

use mouseover event to programmatically select the rest
mouseover: function () {
var sel = this.value:
var options = $('ol li');
for (var i = 1; i < sel; i++) {
options[i].css('background-image', 'url(../images/starHover.png)')
}
}

here is little bit 'modern' example by using CSS for animations and Angular for getting the selected result.
The trick is in css on hover!
On mouse over the container, add the orange class to all stars, and apply different class (gray) to all stars after the selected one.
In your example it will look something like this
.rate-this-stars-list:hover .star{
color: orange;
}
and then all stars after selected one:
.rate-this-stars-list .star:hover ~ .star{
color: #ddd;
}
but, you can find full working 5 stars rating example with Angular implementation on this link:
https://floyk.com/en/post/angular-star-rating-example

One option for doing that is using CSS Sprite + JS.
The idea is to have all 6 possibilities (0 stars, 1 star, 2 stars, ...) and change the background position according to the position of the cursor.
If you want something simpler, just have 6 separate images and change the background image according to the mouse position.
To do that, make a container of the size of the entire image and then 5 small blocks inside this container (one for each star). Then make the JS change the container's background according to where the mouse is.
An example using JQuery and CSS sprite is here (you can easily make the JS less verbose. This is just a simple example):
http://codepen.io/anon/pen/rkhcJ
HTML
<div id="container">
<div id="1" class="star">1</div>
<div id="2" class="star"></div>
<div id="3" class="star"></div>
<div id="4" class="star"></div>
<div id="5" class="star"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
CSS:
.star{
float:left;
height: 100%;
width: 20%;
}
#container{
background-image: url('http://img1.targetimg1.com/wcsstore/TargetSAS/11_05_2013_06_55/images/ratings-large-sprite-r5.gif');
width: 226px;
height: 50px;
background-color: #c34;
background
}
JS
$("#1").mouseover(function(){
$("#container").css('background-position', '0px -38px');
});
$("#2").mouseover(function(){
$("#container").css('background-position', '0px -76px');
});
$("#3").mouseover(function(){
$("#container").css('background-position', '0px -114px');
});
$("#4").mouseover(function(){
$("#container").css('background-position', '0px -152px');
});
$("#5").mouseover(function(){
$("#container").css('background-position', '0px -190px');
});
$(".star").mouseout(function(){
$("#container").css('background-position', '0px 0px');
});

<style>
.star {
font-size: x-large;
width: 50px;
display: inline-block;
color: gray;
}
.star:last-child {
margin-right: 0;
}
.star:before {
content:'\2605';
}
.star.on {
color: red;
}
.star.half:after {
content:'\2605';
color: red;
position: absolute;
margin-left: -20px;
width: 10px;
overflow: hidden;
}
</style>
<div class="stars">
<?php
$enable = 5.5; //enter how many stars to enable
$max_stars = 6; //enter maximum no.of stars
$star_rate = is_int($enable) ? 1 : 0;
for ($i = 1; $i <= $max_stars; $i++){ ?>
<?php if(round($enable) == $i && !$star_rate) { ?>
<span class="<?php echo 'star half'; ?>"></span>
<?php } elseif(round($enable) >= $i) { ?>
<span class="<?php echo 'star on'; ?>"></span>
<?php } else { ?>
<span class="<?php echo 'star'; ?>"></span>
<?php }
}?>
</div>

I found a lot of the answers overly complex, so I made a single page HTML/JavaScript demo:
https://github.com/zamicol/rating

JQuery tabs not switching

I am having an issue with my script that I always use to switch tabs. I am using jquery elsewhere on my page so the library is working. Just will not switch?
Here is my demo:
Fiddle
Here is the code, really not sure why it is failing?
<div id="buttons">
<ul>
<li id="intro" class="selected">Link1</li>
<li id="teachers">Link2</li>
<li id="learners" class="last">Link3</li>
</ul>
</div>
<div id="introcontent" >
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" >
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" >
<p>sdlkhfskldfjhlksdjflksdj/a>.</p>
</div>
#buttons{
float:right;
left:-50%;
position:relative;
text-align:left;
}
#buttons ul{
list-style:none;
position:relative;
left:50%;
margin-top:96px;
font-size:18px;
}
.light #buttons ul {
margin-top:80px;
}
#buttons li{
float:left;
position:relative;
height:38px;
line-height:38px;
margin-right:47px;
border-top:2px solid #E6E8E8;
cursor:pointer;
}
#buttons li.last{
margin-right:0px;
}
#buttons li.selected{
color:#FF5500;
border-top:2px solid #FF5500;
}
#introcontent, #teacherscontent, #learnerscontent {
padding-top:200px;
margin-bottom:180px;
}
#teacherscontent, #learnerscontent {
display:none;
}
// Change tab class and display content
$('#buttons').on('click', function (event) {
event.preventDefault();
$('#introcontent').removeClass('#teachersoontent');
$(this).parent().addClass('tab-active');
$('.tabs-stage div').hide();
$($(this).attr('href')).fadeIn();
});
$('.tabs-nav a:first').trigger('click'); // Default

So there were quite a few reasons why the code in your fiddle wasn't working.
It was looking for an href to know which div to display, but there weren't any.
I updated your HTML like so, adding a common class to all the divs that would display content, to make it easier to manipulate them as a group:
<div id="introcontent" class="tabContent">
<p>lksdjflksdjfklsdjfklsjfkl</p>
</div>
<div id="teacherscontent" class="tabContent">
<p>lsdklfjsdklfjdlsjflkdsj.</p>
</div>
<div id="learnerscontent" class="tabContent">
<p>sdlkhfskldfjhlksdjflksdj.</p>
</div>
And amended the JavaScript to work with the new class on the content, and not to worry about href properties.
// Change tab class and display content
$('#buttons li').on('click', function (event) { // this lets you click on any li element inside #buttons
$(".selected").removeClass('selected'); // remove the selected class wherever it may be
$(this).addClass('selected'); // add the selected class to the clicked element
$(".tabContent").hide(); // hide all the elements with the class tabContent (added above)
$("#" + $(this).prop("id") + "content").show(); // show the content we want, by taking the ID of the list element and concatenating it into a string that will match the id of one of the content divs
});
$('#buttons li:first').click(); // You can trigger a click event like this
Here is the updated fiddle.
http://jsfiddle.net/YH3f4/2/

Show/hide div on button click

I am trying to show and hide content depending on which button is pressed. The next button should show content 2 and hide content 1, and previous button should do the opposite.
<script type="text/javascript">
$('a.button-next').click(function() {
$("#tab-content2").addClass("show");
});
</script>
CSS:
#tab-content2 {
display: none;
}
#tab-content2.show {
display: none;
}
HTML:
<div id="tab-content1">
<?php the_content(); ?>
</div>
<div id="tab-content2">
<?php the_field("experience");?>
</div>
Previous
next

Try toggleClass and don't forgot to use document.ready():
$(document).ready(function() {
$('a.button-next').click(function() {
$("#tab-content2").toggleClass("show");
});
});
#tab-content2.show {display:block;}

Use a generic class for all content
<div class="content" id="tab-content1">
<?php the_content(); ?>
</div>
<div class="content" id="tab-content2">
<?php the_field("experience");?>
</div>
Previous
next
So the css would be
.content {
display: none;
}
And the Javascript
$('a.button-next').click(function() {
$('.content').hide(); // To hide all other contents
$("#tab-content2").show(); // Show the one content you want to display
});

The display property of show is none.
Change it to block.
Also, you can just use the .show() or .hide() function instead of using classes.

Try this...
$('a.button-next').on('click', function() {
$("#tab-content2").toggle("show");
});

HTML
<div id="tab-content-holder">
<div id="tab-content1 show">
<?php the_content(); ?>
</div>
<div id="tab-content2">
<?php the_field("experience");?>
</div>
</div>
Previous
Next
JS
$(document).ready(function() {
$(".button-back").click(function() {
MenuNavigationClick(-1);
});
$(".button-next").click(function() {
MenuNavigationClick(1);
});
function MenuNavigationClick(direction) {
// Get current element index and toggle
var current = $("#tab-content-holder .show");
var index = current.index();
current.toggleClass("show");
// Move to next element and check for overflow
index += 1 * direction;
index %= $("#tab-content-holder div").length;
// Toggle next element
$("#tab-content-holder div:eq("+index+")").toggleClass("show");
}
});
CSS
#tab-content-holder div {
display: none;
}
#tab-content-holder div.show {
display: block;
}

Have you tried transferring the show class on another line?
.show
{
display: block;
}