I am trying to work with an accordion. My goal is to have a '+' symbol showing when not expanded and a '-' when expanded. I am just trying to get the first swap to work and cannot get the .equals() function to compare properly. Any help?
<script type="text/javascript">
function replaceMe(){
var symbol = document.getElementById("swap1").innerHTML;
if(symbol.equals("+") {
document.getElementById("swap1").innerHTML="-";}
else {
document.getElementById("swap1").innerHTML="+";}
}
</script>
THIS IS THE HTML
<div class="accord">
<div class="title" onclick="replaceMe()">
<h2 id="swap1">+</h2>
<h1>Heading 1</h1>
</div>
<div class="desc">Sample Sample Fill Data</div>
<div class="title">
<h2 id="swap2">+</h2>
<h1>Heading 2</h1>
</div>
<div class="desc">More Fill Data Not Important</div>
<div class="title">
<h2 id="swap3">+</h2>
<h1>Heading 3</h1>
</div>
<div class="desc">Boring Filler Information</div>
</div>
It's JavaScript, not Java; you can safely use just '===' here to compare strings. ) And your if should really be if(symbol.equals("+")) - a closing parenthesis is missing in the code you quoted.
Related
I would like to hide an element on a specific page by using Javascript, Jquery, or CSS. I have really limited options on how to do it because I'm using a very strict eshop solution. I can add Jquery or Javascript but it will be inserted into every single page on my eshop. I don't want to overload my website so the first condition has to be something like "if body class is .view-commodity-detail" (which is a page for every product detail) do something.
The second condition I need is to hide div with class .detaillist-row but only that one where the text Luggage Volume is located. (I need to hide .detaillist-row-value of this div parameter also - such as 50-59L, 60-69L etc..)
My code on eshop product page looks like this
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
I was thinking about using something like this, but it would hide all my detaillist-row and I want to hide only that one where the Luggage Volume is.
if ($("body").hasClass(".view-commodity-detail")) {
if ($('.detaillist-row > .detaillist-row-name:contains("Luggage volume")').length > 0) {
$(".detaillist-row").hide();
}
}
I hope it makes any sense.
Thank you guys for your help!
You can do this using data-value but you need to add data-value to that element which you want to hide.
like this:
<div class="detaillist-row-name" data-value="Luggage Volume">Luggage Volume</div>
div[data-value="Luggage Volume"] {
display: none;
}
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name" data-value="Luggage Volume">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
or you can use javascript
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name" id="detaillist-row-name">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
<script>
var str = document.getElementById("detaillist-row-name").innerHTML;
var n = str.replace("Luggage Volume", "");
document.getElementById("detaillist-row-name").innerHTML = n;
</script>
I tried to make a link to a section on a one page. It works strangely sometimes, but mostly it gets stuck at the section where you clicked the item and then if you want to scroll manually it does not work at all.
As far as I have seen on the Internet, there is no more to do than creating an a tag with href="#someID" and then clicking it, it should take me to the corresponding id or am I missing something?
<div>
<div class="content-wrapper">
<div class="v-center">
<div class="main-content" style="margin-top: 200px">
<p> Some Text </p>
<ul>
<li>Problem Collection<br></li>
<li>Specific Problem1<br></li>
<li>Specific Problem2<br></li>
<li>Specific Problem3<br></li>
</ul>
</div>
</div>
</div>
<div style="margin-top: 400px">
<div>
<div id="anmeldungsprobleme">
<h2>IDC Anmeldung schlägt generell fehl</h2>
</div>
<div>
<p>Descriptive Text</p>
<p style="color: green"> Username: Placeholder<br> Passwort: *********</p>
</div>
</div>
</div>
<div id="anmeldungJA">
<h3>Anmeldung ist möglich</h3>
<p>Text about the problem</p>
</div>
</div>
Thank you so mcuh for your help #ProEvilz
I tried it outside of my IDE and now it works...
Seems to be a problem inside of brackets.
Chrome shows a different sort result from other browsers - with Firefox and Edge showing the desired result.
How to achieve the same result with Chrome?
I tried, but not working, with:
$(function(){
var order = $('.files').find('.first','.second').sort(sortMe);
$('.files').append(order);
});
function sortMe(a, b) {
return a.first < b.second;
}
The desired result... and the default in Firefox and other browsers is:
<div class="file-container">
<div class="files">
<div class="first">content</div>
<div class="first">content</div>
<div class="second">content</div>
<div class="second">content</div>
</div>
</div>
Chrome returns
<div class="file-container">
<div class="files">
<div class="first">content</div>
<div class="second">content</div>
<div class="second">content</div>
<div class="first">content</div>
</div>
</div>
Selector at .find('.first','.second') is not correct, where second parameter should log an error Unexpected identifier, try adjusting to .find('.first, .second') without terminating string and including a literal comma , character which would pass two parameters, instead of single selector string, comparing a.dataset -b.dataset, wheredata-*` attributes have 0-based indexing from 0-n.
You can add data-* attribute at elements for comparison function.
$(function(){
var order = $('.files').find('.first, .second').sort(sortMe);
should be$('.files').append(order);
});
function sortMe(a, b) {
console.log(a.dataset)
return +a.dataset.order - +b.dataset.order;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-container">
<div class="files">
<div data-order="0" class="first">first content</div>
<div data-order="1" class="second">second content</div>
<div data-order="1" class="second">second content</div>
<div data-order="0" class="first">first content</div>
</div>
</div>
Solved this problem with jquery, but typically when different test data added to site Chrome returned expected result each time so code not needed this time...
var array = ['first', 'second'];
$.each(array,function(index,value){
$('.files').append($('.'+value));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="file-container">
<div class="files">
<div class="first">content for 1.1</div>
<div class="second">content for 2.1</div>
<div class="second">content for 2.2</div>
<div class="first">content for 1.2</div>
<div class="first">content for 1.3</div>
<div class="second">content for 2.2</div>
</div>
</div>
I have a div called "panel" with multiple child elements, each with a class of poster. Each poster will be a card displaying restaurant information. I want to target the h2 for whichever poster the user clicks on, irrespective of which area of the poster they click. I'm using event delegation on the panel but I'm not sure how to target the h2.
HTML:
<div class="panel">
<div class="poster">
<div class="wrapper">
<p class="time">6-7:30PM</p>
<div class="inner-wrapper">
<h2 class="restaurant-title">Restaurant A</h2>
<h3 class="deal-description">bla bla bla</h3>
</div>
</div>
</div>
<div class="poster">
<div class="wrapper">
<p class="time">2-4:30PM</p>
<div class="inner-wrapper">
<h2 class="restaurant-title">Restaurant B</h2>
<h3 class="deal-description">bla bla bla</h3>
</div>
</div>
</div>
<div class="poster">
<div class="wrapper">
<p class="time">1-5:30PM</p>
<div class="inner-wrapper">
<h2 class="restaurant-title">Restaurant C</h2>
<h3 class="deal-description">bla bla bla</h3>
</div>
</div>
</div>
</div>
JS:
var panel = document.querySelector(".panel");
panel.addEventListener("click", handleClick);
use queryselector() in javascript
function handleClick(){
var h2=this.querySelector("h2");
}
Demo
Using jquery:
$(".panel").click(function(){
var h2 = $(this).find('h2');
});
Try this :
$(document).ready(function(){
$(".poster").click(function(){
var h2 = $(this).children(".restaurant-title");
//alert(h2.context.innerText);
})
})
Example on jsfiddle: https://jsfiddle.net/ar1xawku/
Don't forget include jquery library in your code
so i figured out a solution for this, and thought i'd share:
$(".poster").click(function(){
var h2 = $(this).find('h2');
var restaurantTitle = (h2["0"].innerText);
With the example below, I'd like to select the contents of the < h3 > tags for each block, and move them inside the 'title' divs (without the h3 tags). Is this possible?
<div id="block1">
<div class="title">
</div>
<div class="content">
<h3>Title 1</h3>
</div>
</div>
<div id="block2">
<div class="title">
</div>
<div class="content">
<h3>Title 2</h3>
</div>
</div>
Online demo: http://jsbin.com/ezuxo
// Cycle through each <div class="content"></div>
$(".content").each(function(){
// Find its first h3 tag, and remove it
var heading = $("h3", this).remove();
// Set the text of the h3 tag to the value of the previous div (.title)
$(this).prev().html($(heading).html());
});
First off, I'd assign a class to the "blocks", let's call it "block" for now. Then do this:
$(".block").each(function() {
$(".title", this).html($(".content h3", this).html());
}