Beiträge: 17
Themen: 10
Registriert seit: Mar 2022
Bewertung:
0
03.04.2022, 10:22
Hi, ich habe von w3Schools das Beispiel auf meiner Webseite versucht zu implementieren:
https://www.w3schools.com/howto/howto_js_accordion.asp
Leider funktioniert es nicht richtig und ich habe leider auch keine Ahnung warum. Die p-tags lassen sich zwar öffnen und schließen. Aber es zeigt sich weder der Inhalt noch ist die Größe richtig.
Kann mir da jemand Tipps geben?
Vielen Dank
Beiträge: 636
Themen: 65
Registriert seit: Feb 2021
Bewertung:
14
03.04.2022, 19:56
(Dieser Beitrag wurde zuletzt bearbeitet: 04.04.2022, 21:01 von admin.)
Hast du mal link zur Seite , weil so kann ich nicht sehen welche fehler du in der Konsole hast usw
Oder kopiere deinen Code bei https://codepen.io rein
Beiträge: 17
Themen: 10
Registriert seit: Mar 2022
Bewertung:
0
Hi, ich habe meinen Code mal auf das wesentliche reduziert. Im Mapwindow, also im mittleren Div funktioniert das Accordion mittlerweile... Wenn man auf den Buttons mit your bokkings klickt, erscheint ein Aside. Hier würde das Accordion auch funktionieren. Sobald ich aber mit js elemente manuell erzeuge, kommt es zu Fehlern. Wenn ich Text aus meiner Datenbank lade, dann sieht es so aus wie im Bild im ersten Beitrag.
Ich habe für diesen post jetzt, den Teil zur Datenbankverbinding übersprungen, und stattdessen eine leere Php-datei verwendet <?php ?> und eine Liste als output verwendet. Jetzt funktioniert es einigermaßen, aber die pTags werden nicht in voller Größe und teilweise verdeckt angezeigt. Vorallem wenn man auf ein eigen creates klickt.
Danke für deine Hilfe
Code: <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="D:\Privat\Entwicklung\windowjs-master\windowjs-master/window.css" />
<script src="D:\Privat\Entwicklung\windowjs-master\windowjs-master/window.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/95e77da10e.js" crossorigin="anonymous"></script>
<script src="D:\xampp\htdocs\supertramp\jquery.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<title>Document</title>
<link rel="stylesheet" href="css_ts.css">
<style>
</style>
</head>
<body>
<div class="container">
<div class="nav">
<div class="nav_left"><div class="nav_left"></div><i class="fas fa-hat-wizard"></i><div>TommySupertramp</div><div id="login_div"> Login <i class="fab fa-facebook-square"></i></div></div>
<div class="nav_right">
<button onclick="alert('Button Clicked')" class="btn_nav_right">Flight Dart</button>
<button id="book" class="btn_nav_right">Your Bookings</button>
<button id="your_trip" class="btn_nav_right">Your Trip</button>
<button id="routes" class="btn_nav_right">routes</button>
<button id="filter" class="btn_nav_right">filter</button>
</div>
</div>
<div class="main_container">
<div class="map_window">
<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<aside id="aside" class="aside">
<!-- <h2>München</h2>
<p>Information</p>
<img src="https://cdn.pixabay.com/photo/2016/03/04/19/36/beach-1236581__340.jpg" alt=""-->
<h2>Accordion</h2>
<button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</aside>
</div>
</div>
<!-- Modal 1 -->
<div id="modal_filter" class="my-modal">
<header class="handle">
<button id="btn_close_filter" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="my-modal-title">Filter</h4>
</header>
<main>
<div class="modal-body">
<div class="ModalButtons">
<button style="color:yellow" class="btn_nav_right "><i class="fas fa-star"></i></button>
<button style="color:black" class="btn_nav_right"><i class="fas fa-city"></i></button>
<button style="color:green" class="btn_nav_right"><i class="fas fa-tree"></i></button>
<button style="color:black" class="btn_nav_right"><i class="fas fa-landmark"></i></button>
</div>
<div class="addMarkerModal">
<button class="btn_nav_right" id="addspot">add to</button>
<select name="" id="select_filter">
</select>
</div>
<button class="btn_nav_right"class="showMyMarkers">show only my list </button>
<button id="createList_filter" class="btn_nav_right"class="createListModal">Create new </button>
</div>
</main>
</div>
<!-- Modal 2 -->
<div id="modal_routes" id="my-modal-2" class="my-modal">
<header class="handle">
<button id="btn_close_routes" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="my-modal-title">Modal 2</h4>
</header>
<main>
<div class="modal-body">
<div >
<div class="modal-body"></div>
<div class="ModalButtons">
</div>
<h2>Select</h2>
<div class="select_region">
<select name="" id="lists_cont">
<option value="">select</option>
</select>
<select style="visibility: hidden;" name="" id="lists_reg_mac">
<option value="">select</option>
</select>
<select style="visibility: hidden;" name="" id="lists_land">
<option value="">select</option>
</select>
<select style="visibility: hidden;" name="" id="lists_reg_mic">
<option value=""><select name="" id=""></select></option>
</select>
</div>
<div class="btns_aside_add">
<button class=""> add to;</button>
<select name="" id="myLists">
<option value="">select</option>
</select>
</div>
<button id="create_list">create list</button>
<div id="available_items" class="items">
</div>
</div>
</div>
</div>
</main>
</div>
<div id="modal_your_trip" class="my-modal">
<header class="handle">
<button id="btn_close_your_trip" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="my-modal-title">Modal 3</h4>
</header>
<main>
<div class="modal-body">
<div class="ModalButtons">
</div>
<h2>plan your trip</h2>
<div class="btns_aside_add">
<button class=""> add to</button>
<select name="" id="myLists_your_trip">
<option value="">select</option>
</select>
</div>
<button id="create_list_your">create list</button>
<div id="sortable" class="items ul_list">
</div>
</div>
</main>
</div>
</div>
</div>
</body>
<script>
//declaration
btn_route =document.getElementById("routes")
place =document.getElementById("book")
aside = document.querySelector("aside")
map_window = document.querySelector("map_window")
modal = document.getElementById("modal_filter")
modal2 = document.getElementById("modal_routes")
modal3 = document.getElementById("modal_your_trip")
btn_close_filter = document.getElementById("btn_close_filter")
btn_close2 = document.getElementById("btn_close_routes")
btn_close3 = document.getElementById("btn_close_your_trip")
var selects = document.querySelector('#lists_trips');
let selects_cont = document.getElementById("lists_cont");
let selects_region_macro = document.getElementById('lists_reg_mac');
let selects_land = document.getElementById('lists_land');
var selects_region_micro = document.getElementById('lists_reg_mic');
// das folgende nur damit die Modale am Anfang nicht übereinander liegen:
const
boundingRect = document.querySelectorAll('.my-modal')[0]
.getBoundingClientRect(),
hModal = boundingRect.height;
document.querySelectorAll('.my-modal')[1].style.top = hModal + 'px';
btn1 = document.getElementById("filter")
btn2 = document.getElementById("routes")
btn3 = document.getElementById("your_trip")
const myLists = document.getElementById("myLists");
const myLists_your_trip = document.getElementById("myLists_your_trip");
const myLists_your_trip_filter = document.getElementById("select_filter");
//script
simpleDraggable('.my-modal', '.handle');
//aside sichtbar machen und mapwindow verkleinern
place.addEventListener("click",function(){
aside.classList.remove("aside")
aside.classList.add("aside_active")
map_window.classList.remove("map_window_active")
map_window.classList.add("map_window")
})
//Modale am anfang verstecken
hideModalsBeg(modal)
hideModalsBeg(modal2)
hideModalsBeg(modal3)
//Modale erscheinen lassen
btn1.addEventListener("click",function(){
showModals(modal)
})
btn2.addEventListener("click",function(){
showModals(modal2)
})
btn3.addEventListener("click",function(){
showModals(modal3)
})
btnClose(btn_close_filter,modal);
btnClose(btn_close2,modal2);
btnClose(btn_close3,modal3);
document.getElementById("create_list").addEventListener("click", function () {
//musst das nicht auch uploadNew_your sein?
window.open("http://localhost/supertramp/uploadNew.html", "_blank", "toolbar=no,scrollbars=no,top=100,left=100,width=400,height=400");
});
document.getElementById("create_list_your").addEventListener("click", function () {
window.open("http://localhost/supertramp/uploadNew_your.html", "_blank", "toolbar=no,scrollbars=no,top=100,left=100,width=400,height=400");
});
document.getElementById("createList_filter").addEventListener("click", function () {
window.open("http://localhost/supertramp/uploadNew_your.html", "_blank", "toolbar=no,scrollbars=no,top=100,left=100,width=400,height=400");
});
getContentFromPHP(1,'loadListNames_your.php',parseObject,createLists_your_trips)
getContentFromPHP(1,'loadConts.php',parseObject,CreateSelectContinent)
document.getElementById("myLists_your_trip").addEventListener('change', function () {
getContentFromPHP("Poland-trip",'items_aus_db_laden2_yours.php',null,CreateDraggableItems)
})
getContentFromPHP(1,'cutterx2x.php',parseObject,CreateAccordionAside);
//functions
function simpleDraggable(elementSelector, handleSelector) {
const elements = document.querySelectorAll(elementSelector);
if (elements.length === 0) {
throw Error(`Elements matching selector ${elementSelector} not found`);
}
const getCursorPositionFromEvent = (e) => {
if (e.touches && e.touches.length > 0) {
return {
x: e.touches[0].clientX,
y: e.touches[0].clientY,
};
} else {
return {
x: e.clientX,
y: e.clientY,
};
}
};
for (let element of elements) {
let handle;
if (handleSelector) {
handle = element.querySelector(handleSelector);
}
element.style.position = 'absolute';
let cursorPositionX = 0;
let cursorPositionY = 0;
const start = (e) => {
e.preventDefault();
// get initial cursor position
const cursorPosition = getCursorPositionFromEvent(e);
cursorPositionX = cursorPosition.x;
cursorPositionY = cursorPosition.y;
document.addEventListener('mousemove', dragging);
document.addEventListener('touchmove', dragging);
document.addEventListener('mouseup', stop);
document.addEventListener('touchend', stop);
document.addEventListener('touchcancel', stop);
};
const dragging = (e) => {
e.preventDefault();
// get new cursor position
const cursorPosition = getCursorPositionFromEvent(e);
// calculate position change
const positionChangeX = cursorPositionX - cursorPosition.x;
const positionChangeY = cursorPositionY - cursorPosition.y;
// save new cursor position
cursorPositionX = cursorPosition.x;
cursorPositionY = cursorPosition.y;
// set the element's new position:
element.style.left = `${element.offsetLeft - positionChangeX}px`;
element.style.top = `${element.offsetTop - positionChangeY}px`;
};
const stop = () => {
document.removeEventListener('mousemove', dragging);
document.removeEventListener('touchmove', dragging);
document.removeEventListener('mouseup', stop);
document.removeEventListener('touchend', stop);
document.removeEventListener('touchcancel', stop);
};
if (handleSelector && handle) {
handle.addEventListener('mousedown', start);
handle.addEventListener('touchstart', start);
} else {
element.addEventListener('mousedown', start);
element.addEventListener('touchstart', start);
}
}
}
function hideModalsBeg(modal){
modal.classList.remove("my-modal")
modal.classList.add("my-modal-hide")
}
function showModals(modal){
modal.classList.remove("my-modal-hide")
modal.classList.add("my-modal")
}
function getContentFromPHP(param1,php_function,function1,function2,param2,param3){
const params = new FormData();
if(param1){
params.append('post_var1', param1);
}
if(param2){
params.append('post_var2', param2);
}
if(param3){
params.append('post_var3', param3);
}
fetch(php_function, {
method: 'post',
body: params
}).then(res => {
return res.text();
}).then(res => {
output = res;
if(function1){
if (typeof(output) == "string"){
//parse json
output = function1(output)
}
}
if(function2){
function2(output)
}
})
}
function parseObject(object){
let output = JSON.parse(object);
return output
}
function createLists_your_trips(list_names_your){
let Listelements = [];
for (let x = 0; x < list_names_your.name.length; x++) {
Listelements.push(list_names_your.name[x].name)
}
//Listelements = ["List A","List C"];
Listelements.forEach(getListOptions1)
Listelements.forEach(getListOptions_routes1)
}
function getListOptions1(item,index){
option = document.createElement("option");
option.innerText = item;
myLists.appendChild(option)
option_your = document.createElement("option");
option_your.innerText = item;
myLists_your_trip.appendChild(option_your)
option_filter = document.createElement("option");
option_filter.innerText = item;
myLists_your_trip_filter.appendChild(option_filter)
myLists.appendChild(option)
}
function getListOptions_routes1(item,index){
option = document.createElement("option");
option.innerText = item;
}
function btnClose(button,modalObj) {
button.addEventListener("click",function(){
modalObj.classList.remove("my-modal")
modalObj.classList.add("my-modal-hide")
})
}
function CreateSelectContinent(output){
list_continents = output;
for (let x = 0; x < list_continents.continents.length; x++) {
let option_continent = document.createElement('option');
let tempNode_Continent =
document.createTextNode(list_continents.continents[x].name);
option_continent.appendChild(tempNode_Continent);
option_continent.id = x;
selects_cont.appendChild(option_continent);
selects_cont.addEventListener('change', function () {
document.getElementById('lists_reg_mac').style.visibility = "visible"
document.getElementById('lists_reg_mac').innerHTML = '<select name="" id="lists_cont"><option>select</option></select>';
for (let x = 0; x < this.length; x++) {
if (this[x].value == this.value) {
id_cont = this[x].id;}
}
getContentFromPHP(id_cont,'loadTerritories.php',parseObject,CreateSelectTerritories);
})
}
}
function CreateSelectTerritories(output){
document.getElementById('lists_reg_mac').innerHTML = '<select name="" id="lists_cont"><option>select</option></select>';
list_territories = output;
for (let x = 0; x < list_territories.territories.length; x++) {
let optionC = document.createElement('option');
let tempNodeC =
document.createTextNode(list_territories.territories[x].name);
optionC.appendChild(tempNodeC);
optionC.id = x;
document.getElementById('lists_reg_mac').appendChild(optionC)
document.getElementById('lists_reg_mac').addEventListener('change', function () {
selects_land.style.visibility = "visible";
selects_land.innerHTML = '<select name="" id="lists_land"><option>select</option></select>';
for (let x = 0; x < this.length; x++) {
if (this[x].value == this.value) {
let name_territory = this.value;
id_reg_mac = this[x].value;
}}
getContentFromPHP(id_reg_mac,'loadCountries.php',parseObject,CreateSelectCountries);
})
}
}
function CreateSelectCountries(output){
selects_land.innerHTML = '<select name="" id="lists_land"><option>select</option></select>';
list_countries = output;
for (let x = 0; x < list_countries.countries.length; x++) {
let optionC = document.createElement('option');
let tempNodeC =
document.createTextNode(list_countries.countries[x].name);
optionC.appendChild(tempNodeC);
optionC.id = x;
document.getElementById('lists_land').appendChild(optionC)
}
document.getElementById('lists_land').addEventListener('change', function () {
selects_region_micro.style.visibility = "visible";
selects_region_micro.innerHTML = '<select name="" id="lists_reg_mic"><option>select</option></select>';
for (let x = 0; x < this.length; x++) {
if (this[x].value == this.value) {
let name_states = this[x].value
id_micro = this[x].id;
}
}
getContentFromPHP(id_micro,'loadStates.php',parseObject,CreateSelectStates);
})
}
function CreateSelectStates(output){
list_states = output;
selects_region_micro.innerHTML = '<select name="" id="lists_reg_mic"><option>select</option></select>';
for (let x = 0; x < list_states.states.length; x++) {
let optionF = document.createElement('option');
let tempNodeF =
document.createTextNode(list_states.states[x].name);
optionF.appendChild(tempNodeF);
optionF.id = x;
selects_region_micro.appendChild(optionF);
}
document.getElementById('lists_reg_mic').addEventListener('change', function () {
getContentFromPHP("Poland-trip",'items_aus_db_laden2.php',null,CreateUnDraggableList);
})
}
function CreateUnDraggableList(output){
console.log(output)
list_stops = output
console.log(list_stops)
list_stops = JSON.parse(list_stops);
text = JSON.stringify(list_stops.days)
text =text.replace("]", "");
text =text.replace("[", "");
text =text.replace("\"", "");
text =text.replace("\"", "");
days_array = text.split(",")
let div_grandpar = document.getElementById("available_items");
div_grandpar.innerHTML = '<div id="available_items" class="items">';
for (let x = 0; x < list_stops.list_stops.length; x++) {
let div = document.createElement('div');
div.innerHTML = '<span> <i class="fas fa-city"></i> days: <input type="text" readonly></span>';
div.classList.add("icons_your_trip");
div.children[0].children[1].value = days_array[x];
let div_par1 = document.createElement("div")
div_par1.innerText = list_stops.list_stops[x]
div_par1.classList.add("town_name_your_trip")
div_par1.appendChild(div)
let div_par2 = document.createElement("div");
div_par2.classList.add("available_trip_list")
div_par2.appendChild(div_par1)
div_grandpar.appendChild(div_par2)
/*let tempNodeC =
document.createTextNode(list_territories.territories[x].name);
optionC.appendChild(tempNodeC);
optionC.id = x;
document.getElementById('lists_reg_mac').appendChild(optionC)
*/
}
}
function CreateDraggableItems(output){
list_stops = output
console.log(list_stops)
list_stops = JSON.parse(list_stops);
text = JSON.stringify(list_stops.days)
console.log(text)
text =text.replace("]", "");
text =text.replace("[", "");
text =text.replace("\"", "");
text =text.replace("\"", "");
days_array = text.split(",")
console.log(days_array)
let div_grandpar_your = document.getElementById("sortable");
//div_grandpar_your.innerHTML = '<div id="sortable" class="items ul_list">';
for (let x = 0; x < list_stops.list_stops.length; x++) {
let div = document.createElement('div');
i_icon_town = document.createElement('i')
i_icon_town.classList.add('fas');
i_icon_town.classList.add('fa-city');
input = document.createElement('input');
placeHolder_input = "-";
input.setAttribute("placeholder", placeHolder_input);
input.setAttribute("size", 1)
input.addEventListener("keyup", function () {
console.log(select_text)
console.log(this.value)
console.log(this.parentElement.parentElement.id)
getContentFromPHP(this.parentElement.parentElement.id,'updateDay.php',null,null,this.value,select_text);
})
i_icon_trash = document.createElement('i')
i_icon_trash.classList.add('fa');
i_icon_trash.classList.add('fa-trash');
span = document.createElement('span');
span.appendChild(i_icon_town);
span.appendChild(input);
span.appendChild(i_icon_trash);
div.appendChild(span)
//div.innerHTML = '<span> <i class="fas fa-city"></i> days: <input type="text"><i class="fa fa-trash"></i></span>';
div.classList.add("icons_your_trip");
div.setAttribute("id", x);
console.log(div)
div.children[0].children[1].value = days_array[x];
let div_par1 = document.createElement("div")
div_par1.innerText = list_stops.list_stops[x]
div_par1.classList.add("town_name_your_trip")
div_par1.appendChild(div)
let div_par2 = document.createElement("div");
div_par2.classList.add("ui-state-default")
div_par2.classList.add("available_trip_list")
div_par2.classList.add("linkList")
div_par2.appendChild(div_par1)
div_par2.setAttribute("id", x);
div_grandpar_your.appendChild(div_par2)
select_text = "Poland-trip";
trashes = document.querySelectorAll(".fa-trash");
trashes[x].addEventListener("click", removeElement);
/*let tempNodeC =
document.createTextNode(list_territories.territories[x].name);
optionC.appendChild(tempNodeC);
optionC.id = x;
document.getElementById('lists_reg_mac').appendChild(optionC)
*/
id = x;
// //getContentFromPHP("Poland-trip",'loadDay.php',parseObject,loadday?);
//loadDay(input.parentElement.id,value_select)
//select_text = value_select;
}
}
$(function () {
$("#sortable").sortable();
$("#sortable").disableSelection();
});
function removeElement(name_post) {
element_delete = this.parentElement.parentElement.parentElement;
element_clicked_id = this.parentElement.parentElement.id;
element_delete.remove();
name_post = "Poland-trip";
//name_post = document.getElementById(myLists_your_trip).selectedIndex;
php_removedElementId(element_clicked_id, name_post);
}
function php_removedElementId(val, name) {
alert(val)
const url = 'http://localhost/supertramp/deleteElementLi.php';
const params = new FormData();
params.append('post_var1', val);
params.append('post_var2', name);
fetch('deleteElementLi.php', {
method: 'post',
body: params
}).then(res => {
outputB= "";
return res.text();
}).then(res => {
//outputB.innerHTML= res;
});
}
$(function () {
$("#sortable").sortable({
stop: (event, ui) => {
moved_id = ui.item.attr('id');
next_id = ui.item.next().attr('id');
links = document.querySelectorAll(".linkList");
if (typeof next_id == "undefined") {
ui.item.attr("id", links.length - 1);
for (let x = 0; x < links.length - 1; x++) {
links[x].id = x;
}
}
else if (next_id == 0) {
for (let x = 0; x < links.length; x++) {
links[x].id = x;
}
}
else {
ui.item.attr("id", next_id - 1);
for (let x = parseInt(moved_id); x < parseInt(next_id) - 1; x++) {
links[x].id = x;
}
}
php_changeListorder(moved_id, next_id);
}
});
$("#sortable").disableSelection();
});
function php_changeListorder(moved_id,next_id,name){
name = "Poland-trip";
getContentFromPHP(moved_id,'changeListOrder.php',null,null,next_id,name);
getContentFromPHP(moved_id,'changeDayOrder.php',null,null,next_id,name);
}
function showlog(output){
console.log(output)
}
function CreateAccordionAside(output){
contentAcc = output;
console.log(output)
for (let x in output){
buttonAcc = document.createElement("button")
buttonAcc.classList.add("accordion")
buttonAcc.innerText = x;
let textP = document.createElement("p")
content = "";
for (y in output[x]){
content = content + output[x];
}
textP.innerText = content
let div = document.createElement("div")
div.classList.add("panel")
div.appendChild(textP)
document.getElementById("aside").appendChild(buttonAcc)
document.getElementById("aside").appendChild(div)
}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
}
</script>
<script>
</script>
als Ergänzung noch die css:
Code: .accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}
*{
margin: 0;
padding: 0;
}
.nav{
border-bottom: blue;
width: 95%;
display: flex;
flex-direction: row;
align-items: center ;
justify-content: space-between;
padding-top: 10px;
}
.nav_left{
display: flex;
flex-direction: row;
align-items: center ;
margin-left: 10px;
}
.btn_nav_right{
border-radius: 5px;
}
.btn_right{
border-radius: 5px;
border: solid black 1px;
width: 150px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.map_window{
width: 95%;
height: 100vh;
background-color: cadetblue;
margin-left: 10px;
margin-top: 10px;
}
.map_window_active{
width: 70%;
height: 100vh;
background-color: cadetblue;
margin-left: 10px;
margin-top: 10px;
}
.main_container{
display: flex;
flex-direction: row;
}
.select_region{
display: flex;
flex-direction: column;
}
.aside{
display: none;
height: 30%;
width: 100%;
background-color: whitesmoke;
margin-left: 10px;
margin-top: 10px;
border-radius: solid black 1px;
}
.aside_active{
display: flex;
height: 100vh;
width: 30%;
background-color: whitesmoke;
margin-left: 10px;
margin-top: 10px;
border-radius: solid black 1px;
flex-direction: column;
align-items: flex-start;
}
.backgroundClickable{
width: 300px;
height: 300px;
background-color: brown;
}
.modal-dialog2 input{
width: 20px;
}
.modal-dialog3 input{
width: 20px;
}
.items{
border-radius: 5px;
border: solid black 2px
}
.item btn_right{
width: 200px;
}
.item btn_right2{
width: 240px;
}
.your_trip_list{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: solid black 1px;
border-radius: 5px;
}
.available_trip_list{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: solid black 1px;
border-radius: 5px;
}
.routes_modal_select{
width: 150px;
}
.aside_active input{
width: 20px;
}
aside img{
width: 90%;
height: 200px;
text-align: center;
margin: 10px 10px 10px 10px;
}
#login_div{
margin-left: 10px;
}
.my-modal {
display: inline-block;
min-width: 150px;
border: 2px solid lightgray;
border-radius: 0.5rem;
background-color: white;
}
.my-modal-hide{
display: none;
}
@media screen and (max-width: 400px) {
.nav{
border-bottom: blue;
width: 95%;
display: flex;
flex-direction: column;
align-items: center ;
justify-content: space-between;
padding-top: 10px;
}
.main_container{
display: flex;
flex-direction: column;
}
.aside{
display: none;
height: 30%;
width: 100%;
background-color: whitesmoke;
margin-left: 10px;
margin-top: 10px;
border-radius: solid black 1px;
}
.aside_active{
display: flex;
height: 100vh;
width: 100%;
background-color: whitesmoke;
margin-left: 10px;
margin-top: 10px;
border-radius: solid black 1px;
flex-direction: column;
align-items: flex-start;
justify-content: center;
}
.map_window_active{
width: 100%;
height: 400px;
background-color: cadetblue;
margin-left: 10px;
margin-top: 10px;
}
.map_window{
width: 95%;
height: 100vh;
background-color: cadetblue;
margin-left: 10px;
margin-top: 10px;
}
}
@media screen and (max-width: 330px) {
.main_container{
display: flex;
flex-direction: column;
}
.nav_right{
display: flex;
flex-direction: column;
}
.aside{
display: none;
height: 30%;
width: 100%;
background-color: red;
margin-left: 10px;
margin-top: 10px;
}
.aside_active{
display: active;
height: 200px;
width: 100%;
background-color: red;
margin-left: 10px;
margin-top: 10px;
}
.map_window_active{
width: 100%;
height: 400px;
background-color: cadetblue;
margin-left: 10px;
margin-top: 10px;
}
.map_window{
width: 95%;
height: 100vh;
background-color: cadetblue;
margin-left: 10px;
margin-top: 10px;
}
.yellow{
background-color: yellow;
}
}
|
