showing a particular div dynamically on a html page - javascript

I want to show only a particular div by calling a function though onclick event .At a time I just want to show a single div and rest all divs should not show in my web page. I have tried this through using display css property.I just want a single function which can handle this .I can do this question by making more than one function.
<html>
<head>
</head>
<body>
<ul>
<li>1</li><!-- show div1-->
<li>2</li><!-- show div2-->
<li>3</li><!-- show div3-->
</ul>
<div id="first">content 1</div>
<div id="second">content2</div>
<div id="third">content3</div>
</body>
</html>


How about this:
Each div needs the same class so you can find and hide them all at once.
The function needs to know the id of the div to show, so pass in the id.
See changes below:
<html>
<head>
</head>
<body>
<ul id="controls">
<li>1</li><!-- show div1-->
<li>2</li><!-- show div2-->
<li>3</li><!-- show div3-->
</ul>
<div id="first" class="content">content 1</div>
<div id="second" class="content">content2</div>
<div id="third" class="content">content3</div>
<script>
$("#controls a").click(function() {
someFunction($(this).attr("data-target"));
});
function someFunction(divId) {
$(".content").hide();
$("#" + divId).show();
}
</script>
</body>
</html>
Note: You need a reference to jQuery for the $ syntax to work.


FYI, you could do this with just CSS:
.panel {display: none}
.panel:target {display: block}
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<div class='panel' id="first">content 1</div>
<div class='panel' id="second">content2</div>
<div class='panel' id="third">content3</div>


I think this is what you want:
<ul>
<li id="li_1">1
</li>
<li id="li_2">2
</li>
<li id="li_3">3
</li>
</ul>
<div class='panel' id="li_1_panel">content 1</div>
<div class='panel' id="li_2_panel">content2</div>
<div class='panel' id="li_3_panel">content3</div>
.panel {
display: none;
}
var panelID = "";
for (i = 1; i <= 3; i++) {
alert('#li_' + i);
$('#li_' + i).on('click', function () {
panelID = "#" + $(this).attr("id") + "_panel";
alert(panelID);
$(panelID).toggle();
});
}
Edit
Also, if you did not want to rely on a rigid naming scheme, you could use a hash.
<ul>
<li id="zeus">1
</li>
<li id="athena">2
</li>
<li id="hades">3
</li>
</ul>
<div class='panel' id="isis">content 1</div>
<div class='panel' id="thor">content 2</div>
<div class='panel' id="aphrodite">content 3</div>
var panelID = "";
var li_to_panel = {
"zeus": "isis",
"athena": "thor",
"hades": "aphrodite"
};
$.each(li_to_panel, function(key, value){
alert(key);
liID = "#" + key;
$(liID).on('click', function () {
panelID = "#" + li_to_panel[$(this).attr('id')];
alert(panelID);
$(panelID).toggle();
});
});

Related

How can I loop through a string array and only get the value of the data attribute that is clicked on

I am trying to get from the <ul class="click-to-section"> to the tester class where I want to loop over the children that has data-section and only show it if it matches up with the <ul class="click-to-section">
See the screenshot of the HTML from Google Dev tools - https://ibb.co/Y3g1jmC
my code to show this is below:
$(".click-to-section li").click(function() {
$(this).each(function(){
let testdata = $(this).data('section');
let testdata2 = $(this).closest("main").next().next().children();
$(testdata2).each(function(){
const dataSection = $(this).data("section");
console.log(dataSection);
});
});
});
HTML
<ul class="click-to-section">
<li data-section="videos">Videos</li> **When this is clicked**
<li data-section="lo">Learning objectives</li>
<li data-section="credits">Credit</li>
<li data-section="toolkits">Toolkit</li>
</ul>
<div class="opinions"></div>
<div class="tester"> **Needs to traverse to this div and loop through the children to show the sections one at a time based on the data-section in the ul menu to equal the data-section here **
<div data-section="credits" class="js-tabs" style="display: none;"</div>
<section data-section="videos" class="js-tabs"></section>
<div class="js-tabs" data-section="lo" style="display: none;"></div>
<div data-section="toolkits" class="js-tabs" style="display: none;"></div>
</div>

Updated the code to click on li and show tester elements that matches data attributes of clicked li
Working Code below
$(".click-to-section li").on("click", function() {
var dataSection = $(this).attr("data-section");
$(".tester > *").hide();
$(".tester [data-section=" + dataSection + "]").show();
})
li {
cursor: pointer
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="click-to-section">
<li data-section="videos">Videos</li> **When this is clicked**
<li data-section="lo">Learning objectives</li>
<li data-section="credits">Credit</li>
<li data-section="toolkits">Toolkit</li>
</ul>
<div class="opinions"></div>
<div class="tester">
<div data-section="credits" class="js-tabs">cred </div>
<section data-section="videos" class="js-tabs">video</section>
<div class="js-tabs" data-section="lo">lo</div>
<div data-section="toolkits" class="js-tabs">js tabs</div>
</div>

Change Div using Li in html or javascript

I want to display one div at a time and hide other .
Need the same effect like:http://jsfiddle.net/cqDES/1552/
<ul class="nav-sidebar">
<li>elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>

If you don't want sliding effect use show()/hide()
$(() => {
$('div:not(#div0)').hide();
$('.nav-sidebar li').click(function () {
var index = $(this).index() + 1;
$(`div:not(#div${index})`).hide();
$(`#div${index}`).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
<li>elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>

You can use show()/hide() functions :
$(function() {
$('.nav-sidebar li').click(function() {
var index = $(this).index() + 1;
$('div:not(#div' + index + ')').hide();
$('#div' + index).show();
});
});
div[id^='div']
{
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
<li>elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>
show function Documentation
hide function Documentation

I think this is what you are asking for.
JSFiddle
$(function() {
var panels = $('div').hide();
var tabs = $('.nav-sidebar li');
tabs.click(function(orgEvent) {
let clickedTabIndex = tabs.index(orgEvent.currentTarget);
panels.each((index, panel)=>{
$(panel)[index === clickedTabIndex ? "slideDown" : "slideUp"]();
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav-sidebar">
<li> elem1</li>
<li> elem2</li>
<li> elem3</li>
</ul>
<div id="div1">this is div 1</div>
<div id="div2">this is div 2</div>
<div id="div3">this is div 3</div>

Event target - targeting all divs, with a classname in the nextSibling?

New to javascript...
I'm trying to build an event handler, that will set the tabIndex of a set of links to 0 when it's clicked... I'm unsure how to target that exactly.
Example:
<div id="a">Link</div>
<div id="b">
<div class="link" tabIndex="-1">Link 1</div>
<div class="link" tabIndex="-1">Link 2</div>
<div class="link" tabIndex="-1">Link 3</div>
</div>
Im looking ion how to target all the divs with class "link" in #b when I click on #a.
Any advice appreciated!!

In addition to the already given answer I do recommend making use of a more meaningful markup and, if available/possible, taking advantage of a modern DOM.
function nullifyTabIndex(elmNode) {
elmNode.setAttribute('tabindex', 0);
}
function handleNullifyTabIndices(evt) {
var
tabItemList = document.body.querySelectorAll('#b > li');
tabItemList.forEach(nullifyTabIndex);
}
function registerHandlingOfTabindexChange(evt) {
var
elmTrigger = document.body.querySelector('#a');
elmTrigger.addEventListener('click', handleNullifyTabIndices, false);
}
document.addEventListener('DOMContentLoaded', registerHandlingOfTabindexChange, false);
Trigger Tab Index Change
<nav>
<ul id="b">
<li tabindex="-1">Link 1</li>
<li tabindex="-1">Link 2</li>
<li tabindex="-1">Link 3</li>
</ul>
</nav>

The below should help you.
Html:
<div id="a">Link</div>
<div id="b">
<div class="link" tabIndex="-1">Link 1</div>
<div class="link" tabIndex="-1">Link 2</div>
<div class="link" tabIndex="-1">Link 3</div>
</div>
JS:
<script>
window.onload = function () { test() }; //Call the test function below on load
function test() {
document.getElementById("a").addEventListener("click", updateAttribute); //attach event listener to div with id "a"
}
function updateAttribute()
{
var ele = document.getElementsByClassName("link"); //Get all div elements with class name "link" under div "b"
for(var i = 0; i < ele.length; i++) //Loop through all div elements and set attribute "tabIndex" to "0"
ele[i].setAttribute("tabIndex", "0");
}
</script>

how to make panels switch automatically

I made panels but i don't know how to make them switch automatically, i would appreciate if you help me.
js:
// akcii panels
$(".load-block:first").addClass('active');
$("#akciiContent li").click(function(event) {
event.preventDefault();
var elemId = $(this).attr("data-akcii");
$("#akciiContent li").removeClass("active");
$(".ak-block").removeClass("selected");
$(this).addClass("active");
$("#"+elemId).addClass("selected");
});
html:
<div class="row">
<div class="akcii-block-one">
<ul id="akciiContent">
<li data-akcii="block-three" class="load-block">
<p>Приведи друга</p>
<div class="loader"></div>
</li>
<li data-akcii="block-four" class="load-block">
<p>Установка центрального охранного прибора бесплатно</p>
<div class="loader"></div>
</li>
</ul>
</div>
<div class="akcii-block-two">
<div id="block-three" class="ak-block">
<img src="includes/icons/akcii-3.jpg">
</div>
<div id="block-four" class="ak-block">
<img src="includes/icons/akcii-4.jpg">
</div>
</div>
</div>

HTML markup
<div class="panels">
<ul>
<li class="active" data-panel="panel1">Tab 1</li>
<li data-panel="panel2">Tab 2</li>
<ul>
<div id="panel1" class="panel active">Panel 1 content</div>
<div id="panel2" class="panel">Panel 2 content</div>
</div>
Jquery function
$(document).ready(function(){
$('.panels ul li').on('click', function(){
if($(this).hasClass('.active')){
//ignore if its already active
return;
}
var active = $('.panels ul li.active, .panels .panel.active');
active.removeClass('active');
//set active tab
$(this).addClass('active');
//set attive panel
$('#' + $(this).attr('data-panel')).addClass('active');
});
});
CSS
.panels .panel{
display:none;
}
.panels .panel.active{
display:block;
}

Using Jquery to toggle class based on menu item clicked

Ok im working on this website where Id like to have the content of a div change to content based on the menu item clicked. I do not have pages for the different menu items but I have all the different content in divs in the index page. I would like to incorporate JQuery but I just cannot seem to find a way to link the menu item class or id to the corresponding div element. My code below":
<html>
<body>
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about">About Me</li>
<li class="btn" id="gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
</body>
</html>
etc..
as for my JQuery coding so far this is where i am after hours of trying different things out
//Update Content-Container Div
$(document).ready(function(){
var $main = $(".content-container");
var $section = $(".content");
$("#about").click(function(){
$main.empty();
$main.find(".bio");
$(".bio").show();
});
});

Instead of writing individual handlers for each menu item, use a data-* attribute to refer to a particular content which need to be displayed, then in the click handler use that attribute to decide which content has to be displayed
<div class="navbar grid_12">
<ul>
<li class="btn" id="home">Home</li>
<li class="btn" id="about" data-target=".bio">About Me</li>
<li class="btn" id="gallery" data-target=".gallery">Gallery</li>
<li class="btn" id="resume">Resume</li>
<li class="btn" id="contact" data-target=".contact">Contact Me</li>
</ul>
</div>
<div class="content-container">
<div class="bio content">
About me content
</div>
<div class="contact content">
Contact me content
</div>
<div class="gallery content">
gallery content
</div>
</div>
then
$(document).ready(function () {
var $main = $(".content-container");
var $section = $(".content").hide();
$(".navbar li.btn").click(function (e) {
e.preventDefault();
$section.hide();
var target = $(this).data('target');
if(target){
$section.filter(target).show();
}
});
});
Demo: Fiddle

Check out jquery tabs,
I think you need this.
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>
</head>
<body>
<div id="tabs">
<ul>
<li>Home</li>
<li>About Me</li>
<li>Gallery</li>
<li>Resume</li>
<li>Contact Me</li>
</ul>
<div id="tabs-1">
<p>Home content</p>
</div>
<div id="tabs-2">
<p>About me content</p>
</div>
<div id="tabs-3">
<p>Gallery content </p>
</div>
<div id="tabs-4">
<p>Resume content </p>
</div>
<div id="tabs-5">
<p>Contact Me content </p>
</div>
</div>
</body>
</html>

Try:
Assuming ids are associated with relevant classes.
HTML:
<li class="btn" id="bio">About Me</li>
JS:
$(".btn").click(function () {
$(".content-container .content").hide();
$(".content-container").find("."+$(this).attr("id")).show();
});
DEMO here.

Here I initially hid everything, then based on what links you click, the page displays the correct content. Note that your about page has the wrong id attribute so it will not work but your contact and gallery pages work. This is roughly how the twitter bootstrap framework works, I do suggest you look at that.
var $main = $(".content-container");
var $section = $(".content");
$section.hide();
$("li.btn").on('click', function() {
var link_id = $(this).attr('id');
var content = $main.find("." + link_id);
$section.hide();
content.show();
})
Working Example

const containers = Array.from(document.querySelectorAll('.content'));
// Slicing for link as it's not related to changing the slide content,
// so we don't want to bind behaviour to it.
const links = Array.from(document.querySelectorAll('.navbar ul .btn a')).slice(1);
$(function() {
hideEls(containers);
});
function hideEls (els) {
if (Array.isArray(els)) {
els.forEach(el => {
el.style.display = 'none';
});
}
return;
}
function showEl (els, i, e) {
e.preventDefault();
hideEls(els);
els[i].style.display = 'block';
}
links.forEach((link, i) => {
link.addEventListener('click', showEl.bind(null, containers, i));
});
Here's a fiddle

Categories