I'm trying to make some sort of gallery on my website. There are 3 buttons, and underneath some text and picture are placed. When I click the button, I want that the content changes (to the content from button #2 etc.). How can I achieve that?
<ul>
<a href="">
<li>Btn1</li>
</a>
<a href="">
<li>Btn2</li>
</a>
<a href="">
<li>Btn3</li>
</a>
</ul>
<div class="list-first"">
<p class="list-first list-first-mobile">some text from first btn</p>
<img src="imgs/stock1.jpeg" alt="jpg from first btn" class="list-first-img">
</div>
Try this ,hope it helps
document.querySelectorAll('button').forEach((el, i) => {
el.addEventListener("click", () => {
document.querySelectorAll('p').forEach(ed => ed.style.display = "none")
el.nextElementSibling.style.display = "block"
})
})
<style>
.loc-caption:before {
content: attr(title);
display: block;
}
ul {
text-align: center;
padding: 0;
}
li {
width: 25%;
display: inline-block;
vertical-align: top;
}
li img {
max-width: 100%;
height: auto;
}
</style>
<ul>
<li class="loc-caption"><button>ClickME</button>
<p style="display:none" class="list-first list-first-mobile ">
<img src="https://chainimage.com/images/related-pictures-natural-sceneries-beautiful-wallpapers.jpg" alt="jpg from first btn " class="list-first-img "> some text from first btn
</p>
</li>
<li class="loc-caption"><button>ClickME2</button>
<p style="display:none" class="list-first list-first-mobile ">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRwXvWYU5tYrokWILC7lgjmCYqYGvActZnt9q8AcPs4dR7hMTBR" alt="jpg from second btn " class="list-first-img "> some text from second btn
</p>
</li>
<li class="loc-caption"><button>ClickME3</button>
<p style="display:none" class="list-first list-first-mobile ">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTzzP-CJnW3xuNeqqMcNLzK_IFPCywsEKifAWlajEzWcdALIDLI" alt="jpg from third btn " class="list-first-img "> some text from third btn
</p>
</li>
</ul>
Related
I already know how to toggle the active class within each list item (li) when clicked.
But what I need is to copy the uniquely numbered class from the active li (example: .content-item-3.active) to the grand-parent div (.content-grand-dad) > (.content-grand-dad.content-item-3) when each li is toggled and active.
I do not mind if the code is through JQuery or Vanilla JavaScript.
$(document).ready( function() {
$('.content-item').click(function() {
$('.content-item.active').removeClass("active");
$(this).addClass("active");
});
});
.content-item {
cursor: pointer;
}
.content-item-1.active {
color: red;
}
.content-item-2.active {
color: blue;
}
.content-item-3.active {
color: green;
}
.content-item-4.active {
color: yellow;
}
.content-cousin {
display: none;
}
.content-grand-dad.content-item-1 ~ .content-cousin-1, .content-grand-dad.content-item-2 ~ .content-cousin-2, .content-grand-dad.content-item-3 ~ .content-cousin-3, .content-grand-dad.content-item-4 ~ .content-cousin-4 {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-grand-dad content-item-1">
<ul class="content-column">
<li class="content-item content-item-1 active">
<p>Line 1</p>
</li>
<li class="content-item content-item-2 ">
<p>Line 2</p>
</li>
<li class="content-item content-item-3 ">
<p>Line 3</p>
</li>
<li class="content-item content-item-4 ">
<p>Line 4</p>
</li>
</ul>
</div>
<div class="content-cousin content-cousin-1">
<h3>Word 1 </h3>
</div>
<div class="content-cousin content-cousin-2">
<h3>Word 2 </h3>
</div>
<div class="content-cousin content-cousin-3">
<h3>Word 3 </h3>
</div>
<div class="content-cousin content-cousin-4">
<h3>Word 4 </h3>
</div>
For my answer I replaced the numbered classes with a data attribute that holds the number.
Then on load I find the active item and show the corresponding cousin.
Then in my event handler, I simply remove an active class from the cousin, then add an active class to the appropriate cousin based on the selected data attribute.
I also have a new active class that is display block, without the need for the full list of css selectors as before.
Instead of referring to the classes, I also used nth-child to change the color of the items in the list so that way the ids can be more dynamic if needed.
$(document).ready( function() {
//load initial cousins
let active = $(".content-item.active").data("item");
$(".content-cousin[data-item='" + active + "']").addClass("active");
$('.content-item').click(function(e) {
$('.content-item.active').removeClass("active");
$('.content-cousin.active').removeClass("active");
$(this).addClass("active");
$(".content-cousin[data-item='" + $(this).data("item") + "']").addClass("active");
});
});
.content-item {
cursor: pointer;
}
.content-column .content-item.active:nth-child(1){
color: red;
}
.content-column .content-item.active:nth-child(2){
color: blue;
}
.content-column .content-item.active:nth-child(3){
color: green;
}
.content-column .content-item.active:nth-child(4){
color: yellow;
}
.content-cousin {
display: none;
}
.content-cousin.active {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-grand-dad">
<ul class="content-column">
<li data-item="1" class="content-item active">
<p>Line 1</p>
</li>
<li data-item="2" class="content-item">
<p>Line 2</p>
</li>
<li data-item="3" class="content-item">
<p>Line 3</p>
</li>
<li data-item="4" class="content-item">
<p>Line 4</p>
</li>
</ul>
</div>
<div data-item="1" class="content-cousin">
<h3>Word 1 </h3>
</div>
<div data-item="2" class="content-cousin">
<h3>Word 2 </h3>
</div>
<div data-item="3" class="content-cousin">
<h3>Word 3 </h3>
</div>
<div data-item="4" class="content-cousin">
<h3>Word 4 </h3>
</div>
Very first question on Stack Overflow, regarding Vanilla Javascript.
I have four links in an unordered list. I have set up a mouseover event on each <li> by using forEach.
When I hover over the element I add a css pseudo class of ::after to the element, which displays a small css rectangle underneath the hovered element.
When I move my mouse directly downward off the element and off the <ul>, the the Css pseudo class of ::after gets removed and the rectangle disappears, which is exactly what I want. Except if I move my mouse directly from one link element to another element to the left or right, the previous link element's css pseudo class of ::after still remains, so the square remains.
Below is some sample code. Any insights would be highly appreciated.
navigationMouseOver();
function navScroll() {
window.addEventListener("scroll", function() {
if (document.documentElement.scrollTop > 100) {
document.querySelector(".contact-info2").classList.add("visible");
} else {
document.querySelector(".contact-info2").classList.remove("visible");
}
})
}
function navigationMouseOver() {
let navLi = document.querySelectorAll(".link");
navLi.forEach(function(element) {
element.addEventListener("mouseover", function(e) {
let link = e.currentTarget;
let linkText = e.currentTarget.textContent;
console.log(linkText);
const subMenu = document.querySelector(".sub-menu");
const arrow = document.querySelector(".arrow");
let elementPos = link.getBoundingClientRect();
let elementTop = elementPos.top - 50;
let elementWidth = elementPos.width;
let elementBottom = elementPos.bottom - 10;
let elementCenter = (elementPos.left + elementPos.right) / 2;
let trueCenter = elementCenter - elementWidth;
let arrowW = arrow.clientWidth;
let arrowCenter = elementCenter - arrowW;
element.classList.add("after");
subMenu.classList.add("show");
arrow.style.bottom = `${elementBottom} px`
arrow.style.left = `${arrowCenter}px`
subMenu.style.top = `${elementBottom}px`;
subMenu.style.left = `${trueCenter}px`;
subMenu.innerHTML = "Hallo";
navMouseOver(element)
})
})
}
function navMouseOver(element) {
let subMenu = document.querySelector(".sub-menu")
let banner = document.querySelector(".banner");
banner.addEventListener("mouseover", function(e) {
if (!e.target.classList.contains("link")) {
subMenu.classList.remove("show");
element.classList.remove("after");
}
})
}
.banner-nav li.after::after {
content: "";
display: block;
position: absolute;
background: white;
height: 30px;
width: 30px;
top: - 20px;
left: 40%;
}
<section class="banner">
<div class="banner-logo">
<h1 class="logo-text"> Logo</h1>
</div>
<div class="banner-nav ">
<ul class="nav-ul ">
<li class="link"> Gallery </li>
</a>
<a href="#">
<li class="link"> Products</li>
</a>
<a href="#">
<li class="link"> About </li>
</a>
<a href="#">
<li class="link"> Contact </li>
</a>
</ul>
</div>
<div class="arrow"></div>
<div class="sub-menu"></div>
</section>
You don't need JavaScript for this. You can combine :hover pseudo class with ::after like this:
.banner-nav li:hover::after {}
.banner-nav li:hover::after {
content: "";
display: block;
position: absolute;
background: white;
height: 30px;
width: 30px;
top: - 20px;
left: 40%;
border: 1px solid;
}
<section class="banner">
<div class="banner-logo">
<h1 class="logo-text"> Logo</h1>
</div>
<div class="banner-nav ">
<ul class="nav-ul ">
<li class="link"> Gallery </li>
</a>
<a href="#">
<li class="link"> Products</li>
</a>
<a href="#">
<li class="link"> About </li>
</a>
<a href="#">
<li class="link"> Contact </li>
</a>
</ul>
</div>
<div class="arrow"></div>
<div class="sub-menu"></div>
</section>
I have three images on an HTML home page. I want the user to be able to click on the images to go to another page. I have this so far:
#features ul li.feature-1 {
background: url('../images/pavilion_small.png') no-repeat top center;
}
#features ul li.feature-2 {
background: url('../images/dtc_small.png') no-repeat top center;
}
#features ul li.feature-3 {
background: url('../images/downtown_small.png') no-repeat top center;
}
I am a little confused how to hyperlink the images to another page. I've looked some things up online about it, but since I am fairly new to this, they seemed a little confusing to me. Could someone explain what I should be doing to accomplish this? Thanks!
Also, here is my HTML:
<div id="features">
<p id="homeValue"></p>
<h3>Find Out What Your Home is Worth</h3>
<center><h4>Begin by clicking your town name</h4></center>
<div class="wrapper">
<ul>
<li class="feature-1">
<h4>A</h4> <!-- This links only the text to the appropriate page -->
<p>sdfhsfkjs</p>
</li>
<li class="feature-2">
<h4>B</h4>
<p>sfkljsfklsjf</p>
</li>
<li class="feature-3">
<h4>C</h4>
<p>sdfkljsdlkfj</p>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
You can Keep images in an Anchor tag
<li>
<a href="https://yoursite.com/yourlink">
<img alt="image" src="https://www.yoursite.com/images/youimage.png">
</a>
</li>
Or image from stylesheet
<li class="feature-1">
</li>
But the problem here is image is not inside you a tag
You can wrap your li content in an a tag. You still get the benefit of having the background image, but the entire content block will link to a new URL:
#features ul li.feature-1 {
background: url('https://via.placeholder.com/200x200') no-repeat top center;
}
#features ul li.feature-2 {
background: url('https://via.placeholder.com/200x200') no-repeat top center;
}
#features ul li.feature-3 {
background: url('https://via.placeholder.com/200x200') no-repeat top center;
}
#features ul li a {
display: block;
}
<div id="features">
<p id="homeValue"></p>
<h3>Find Out What Your Home is Worth</h3>
<center>
<h4>Begin by clicking your town name</h4>
</center>
<div class="wrapper">
<ul>
<li class="feature-1">
<a href="#">
<h4>A</h4>
<!-- This links only the text to the appropriate page -->
<p>sdfhsfkjs</p>
</a>
</li>
<li class="feature-2">
<a href="#">
<h4>B</h4>
<p>sfkljsfklsjf</p>
</a>
</li>
<li class="feature-3">
<a href="#">
<h4>C</h4>
<p>sdfkljsdlkfj</p>
</a>
</li>
<div class="clear"></div>
</ul>
</div>
</div>
I set the a to display as block, so no matter where you hover on the li the area will be clickable.
Somehow my list of items does not show more or show less when clicking a button.
First you should see 3 items and a button with "+". Then when you click "+" the other items should show and then when clicking "-" the items limit back to 3 items again.
$(document).ready(function () {
var x = $("#list .content"),
y = "<span class='present'>+</span>";
x.find("a").length > 3 && (x.toggleClass("div_hide"), x.append(y)),
$(".present").click(function () {
$(this).parent().toggleClass("div_hide"), "-" == $(this).text()
? $(this).html("+")
: $(this).html("-")
#list .div_hide a:nth-child(n+3) {
display: none !important;
}
span.present {
display: block;
color: black;
background: yellow;
}
<h1>List</h1>
<div id="list">
<a class="content" href="#">one</a>
<a class="content" href="#">two</a>
<a class="content" href="#">three</a>
<a class="content" href="#">four</a>
<a class="content" href="#">five</a>
<a class="content" href="#">six</a>
</div>
I made an dynamic example based on your code.
var $listElements = $("#list a");
$listElements.hide();
$listElements.filter(':lt(2)').show();
$('#list').append('<a><span>+</span><span class="less">-</span></ai>');
$("#list").find('a:last').click(function(){
$(this).siblings(':gt(1)').toggle('slow');
$(this).find('span').toggle();
});
You can have as many content elements as you like
<h1>List</h1>
<div id="list">
<a class="content" href="#">one</a>
<a class="content" href="#">two</a>
<a class="content" href="#">three</a>
<a class="content" href="#">four</a>
<a class="content" href="#">five</a>
<a class="content" href="#">six</a>
</div>
https://jsfiddle.net/ahentea/jwLhd7o2/
look this ans i have do this with jquery
$(document).ready(function () {
var x = $("#list .content"),
y = "<span class='present'>+</span>";
$("#list .content:last-child").after(y);
$(".content").each(function(index){
if(index>=3){
$(this).addClass('toBeshow dNone');
}
});
$(document).on('click', '.present', function(){
$(".toBeshow").toggleClass('dNone');
});
});
span.present {
display: block;
color: black;
background: yellow;
}
.dNone{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>List</h1>
<div id="list">
<a class="content" href="#">one</a>
<a class="content" href="#">two</a>
<a class="content" href="#">three</a>
<a class="content" href="#">four</a>
<a class="content" href="#">five</a>
<a class="content" href="#">six</a>
</div>
I want to add toggler to the following code:
<div class="z100" id="category-sidebar">
<h3 class="header">
<a class="header" href="/shop/us/en/#">
<span>The Latest</span>
</a>
</h3>
<ul class="show-more limit-10" style="display: block;">
<li class=" first">
<span>New Arrivals</span>
</li>
......
</ul>
<h3 class="header">
<a class="header" href="/shop/us/en/#">
<span>The Latest</span>
</a>
</h3>
<ul class="show-more limit-10" style="display: block;">
<li class=" first">
<span>New Arrivals</span>
</li>
......
</ul>
......
</div>
I tried
$("./ul"){
attribute("data-ur-toggler-component","content")
attribute("data-ur-state","disabled")
wrap("div",data-ur-set: "toggler",data-ur-state: "disabled"){
insert_top("div",class:"cat-header",data-ur-toggler-component:"button",data-ur-state:"disabled"){
move_here("../h3/a","top") {
name("div");
attribute("href","")
}
}
}
}
but was not able to move toggler header to right place.
html() {
$('//div[#class="z100"]') {
attribute('data-ur-set','toggler')
attribute('style','border: 1px red so;id;')
$('//h3[#class="header"]') {
name('div')
attribute('data-ur-toggler-component','button')
}
$('//ul[#class="show-more limit-10"]') {
name('div')
attribute('data-ur-toggler-component','content')
$('.//li') {
name('div')
}
}
}
}
Also write following code in sass file
[data-ur-toggler-component="content"] {
display: none;
&[data-ur-state="enabled"] {
display: block;
}
And remove inline property display="block" from html
Refer http://tester.tritium.io/f15079e92fb4b53232bf4a94cceb1787f8012a33