Develop Reference

Convert <li> to accordion

I'm new here.
I'm trying to convert my <li> into an accordion in the mobile view.
I actually have something similar to:
<div class="general" id="horizontalTab">
<div class="list">
<nav>
<ul>
<li class="item1">Item 1</li>
<li class="item2">Item 2</li>
<li class="item3">Item 3</li>
</ul>
</nav>
<div>
<div>
<div class="item1">Description 1</div>
<div class="item2">Description 2</div>
<div class="item3">Description 3</div>
<div>
<div>
And I have this on the footer.php
<script src="<?php echo get_stylesheet_directory_uri(); ?>/assets/js/jquery.responsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var $tabs = $('#horizontalTab');
$tabs.responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion'
});
});
</script>
But it shows me "Uncaught TypeError: oTab is undefined"
So every time I click on the li it displays the related div description.
Now I'd like to convert that into an accordion for the mobile version and moving the description under its <li>.
Any ideas?
I've tryied following this: https://www.jqueryhub.com/responsive-tabs-to-accordion-jquery-plugin-responsive-tabs/ but it's not working :(
Thanks!

Works for me if I remove the div class="list" and add a
If you ignore the demo, you will of course have issues
Note the tabs are not horizontal if they do not have enough horizontal space
$(document).ready(function() {
var $tabs = $('#horizontalTab');
$tabs.responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/responsive-tabs/1.4.4/js/jquery.responsiveTabs.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/responsive-tabs/1.4.4/css/responsive-tabs.min.css" />
<div class="general" id="horizontalTab">
<ul>
<li>Tab-1</li>
<li>Tab-2</li>
<li>Tab-3</li>
</ul>
<div id="item1">Tab content 1</div>
<div id="item2">Tab content 2</div>
<div id="item3">Tab content 3</div>
</div>

Here's the (tautological) way to do it:
var test = document.getElementById("test");
test.addEventListener("click", function(e) {
console.log("click: " + e.target.tagName);
var selected = test.querySelector("li.selected");
if (selected) selected.classList.toggle("selected");
e.target.classList.add("selected");
});
li.accord p{
display: none;
}
li.accord.selected p{
display: block;
}
/* It's a good idea to add this negative style too */
li.accord:not(.selected) p {
display: none;
}
li.accord {
background: grey;
}
<ul id = "test">
<li class="accord">1<p>1</p></li>
<li class="accord">2<p>2</p></li>
<li class="accord">3<p>3</p></li>
</ul>

Writing this in Javascript instead of jQuery

Hi I'm accustomed to writing code in jQuery, and wanting to learn to write in plain Javascript instead. I've got this example to show and hide some tabs using jQuery which is working correctly, but how would this be written differently in Javascript?
I'm trying to compare how differently they're written so i can get a better understanding of it. Any help/tips on how this would be done would be greatly appreciated.
setTimeout(function() {
$('.tabContainer a').click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var activeTab = $(this).attr("href");
$('.tabContent').not(activeTab).css("display","none");
$(activeTab).fadeIn();
});
},1000);
.tabContent {display: none;}
#tab1 {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
<ul class="tabContainer">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" class="tabContent">Tab 1</div>
<div id="tab2" class="tabContent">Tab 2</div>
<div id="tab3" class="tabContent">Tab 3</div>
</div>

You can try the following way except the fadeIn:
setTimeout(function() {
//get all a elements and loop through them
document.querySelectorAll('.tabContainer a').forEach(function(el){
//attach click event to the current element
el.addEventListener('click', function(event) {
event.preventDefault();
//remove the class current from all
this.closest('.tabContainer')
.querySelector('.current')
.classList.remove("current");
//add the class current to the current element's closest li
this.closest('li').classList.add("current");
//set display style none to all
document.querySelectorAll('.tabContent').forEach(function(a){
a.style.display = "none";
});
var activeTab = this.getAttribute("href");
//set display style block to the mached element
document.querySelector(activeTab).style.display = "block";
});
});
}, 1000);
.tabContent {display: none;}
#tab1 {display: block;}
<div class="tabWrapper">
<ul class="tabContainer">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" class="tabContent">Tab 1</div>
<div id="tab2" class="tabContent">Tab 2</div>
<div id="tab3" class="tabContent">Tab 3</div>
</div>

Hiding div element

The operations-box is my div element in html i want to have hidden when the website is open and display it after click the Show more button.
'use strict';
const btnGhost = document.querySelector('.btn-ghost');
const operationsBox = document.querySelector('.operations-box');
const init = function () {
operationsBox.classList.add('hidden');
}
init();
btnGhost.addEventListener('click', function () {
operationsBox.classList.remove('hidden');
});
.hidden {
display: none;
}
<header>
<nav>
<div class="row">
<ul class="main-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</nav>
<div class="main-text-box">
<h1 class="main-welcoming-text"><span style="color: #fff">Cars menagement</span><br>Operate your cars collection</h1>
<a class="btn btn-full" href="#">About me</a>
<a class="btn btn-ghost" href="#">Show more</a>
</div>
<div class="operations-box"></div>
</header>
The result after opening website is like that: (this white box is my operations-box which should be hidden). Can anybody explain what is wrong with my code and what can i change to let it works?

If the init() function is only adding this class to element and is always performed whenever script is loaded then you don't need it.
Simply add class hidden to operations-box like in example below.
'use strict';
const btnGhost = document.querySelector('.btn-ghost');
const operationsBox = document.querySelector('.operations-box');
btnGhost.addEventListener('click', function () {
operationsBox.classList.remove('hidden');
});
.hidden {
display: none;
}
<header>
<nav>
<div class="row">
<ul class="main-nav">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</div>
</nav>
<div class="main-text-box">
<h1 class="main-welcoming-text"><span style="color: #fff">Cars menagement</span><br>Operate your cars collection</h1>
<a class="btn btn-full" href="#">About me</a>
<a class="btn btn-ghost" href="#">Show more</a>
</div>
<div class="operations-box hidden"></div>
</header>

Do this
Give it an id in html like this
<div class="operations-box" id="operations"></div>
In CSS do this
.operations-box:{
display:none
}
in JS do this:
myDiv = document.getElementById('operations')
create a functoin to change display like this:
function showDiv(){
myDiv.display = 'inherit'
}
and lastly call this function showDiv() on click event of button you want to imply this functionality like his.
<button onclick='showDiv()'>Click Me!</button>

How to show specific div's from li-objects?

I' trying to create a <ul> with <li> objects to slide the UL away and show specific div's.
I have these div-tags:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
And this list:
<ul class="meny">
<li id="show1">Show 1</li>
<li id="show2">Show 2</li>
<li id="show3">Show 3</li>
</ul>
Why doesn't this JS work?
$(function() {
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").click("show");
});
});
I've been trying all night long...
EDIT
I'm trying to get my project to have a CLICK-event fired when you press a specific list object. When that is done, the whole ul should slide away and show a specified div.
See: http://aatw.se/test/booking.html

it should work too-
$("#1").css("display","block");

$("#1").click("show");
should be:
$("#1").show();

Firstly your div's are empty .
Next
$("#1").click("show");
Supposed to be
$("#1").show();
You can write up a single event handler to all the li's by using HTML-5 data attributes
HTML
<div id="1">This is Div 1</div>
<div id="2">This is Div 2</div>
<div id="3">This is Div 3</div>
<ul class="meny">
<li data-id="1">Show 1</li>
<li data-id="2">Show 2</li>
<li data-id="3">Show 3</li>
</ul>
JS
$(function() {
$("li").click(function() {
$(".meny" ).toggle("slide");
$("#" + $(this).data('id')).show();
});
});
Check Fiddle

as mentioned, you need to call the show function. Your divs being empty is not an issue. But you should hide them on page load, or set them display to none in your css.
here is a fiddle - http://jsfiddle.net/D6qUe/2
here's your updated code
$("#show1").click(function() {
$(".meny" ).toggle("slide");
$("#1").show();
});
$('div').click(function(){
$('.meny').toggle('slide');
$(this).hide();
});
possible css
div{width:100px;height:100px;background-color:#afa;border:1px solid #0f0;display:none;}

How do you find a div with a variable class?

HTML:
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div class="a1">div 1</div>
<div class="a2">div 2</div>
<div class="a3">div 3</div>
JQUERY:
$('a').on('click', function(e) {
$('#somediv').html($('."this.id"').text());
e.preventDefault();
});
Basically what I want to do is, when I click one of the links in the list, it replaces the contents of "somediv" with the contents of a div that has the class that matches the id of the link.
In other words, when I click link id "a1", I want it to display class "a1" in "somediv". I just don't know the syntax for how to call that in the second line of the jquery.

Do this
$("#a1").click(function() {
var divClass = $(this).attr("id");
$("#somediv").empty().append($("."+divClass).html());
});

http://jsfiddle.net/vD4hA/
Only issue was with your concatination.
You don't need to use $(this).attr('id') since this inside the context is the DOM element and id or any attribute can be retrieved directly as object properties.
$('a').on('click', function(e) {
$('#somediv').html($('div.' + this.id).text()); // You probably dont need 'div.'
//but it is safe to use as you are not selecting based on id(unique) but a class which
//can be in multiple places.
});

$('a').click(function (e) {
$('#somediv').html($('.' + $(this).attr('id'))).text();
e.preventDefault();
});
jsFiddle example

I suggest you modify slightly your code to accept the new HTML5 specifications. More specifically, use the aria-owns which is exactly what you're doing here. See demo.
HTML
<ul>
<li>This is Link 1</li>
<li>This is Link 2</li>
<li>This is Link 3</li>
</ul>
<div id="somediv">
</div>
<div style="display:none;">
<div id="div1">div 1</div>
<div id="div2">div 2</div>
<div id="div3">div 3</div>
</div>
JS
$("a[aria-owns]").on("click", function(e) {
$("#somediv").empty()
.append($("#" + $(this).attr("aria-owns")).clone());
return e.preventDefault(), false;
});