Javascript - How pass function click, from one menu to another - javascript

I am a beginner in JS (level 0.1), and I have a problem with my script.
My practice page has only 1 page, but 2 menus, and I need that when clicking on a menu, this click passes the .active class to the other brother button (1A to 1B, etc.). And I do not know how to do it.
My script works well with one menu at a time, but does not apply the .active class to the second menu.
SEE DEMO LIVE (Codepen)
What am I doing wrong...?
Thanks in advance!
//----------------
$(document).ready(function(){
$('#cont-menu .menu').click(function(){
$('.menu').removeClass("active");
$(this).addClass("active");
});
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}
.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont-menu">
<div id="menu-1">
<div class="menu active">Buton 1-A</div>
<div class="menu">Buton 2-A</div>
<div class="menu">Buton 3-A</div>
<div class="menu">Buton 4-A</div>
<div class="menu">Buton 5-A</div>
</div>
<div id="menu-2">
<div class="menu active">Buton 1-B</div>
<div class="menu">Buton 2-B</div>
<div class="menu">Buton 3-B</div>
<div class="menu">Buton 4-B</div>
<div class="menu">Buton 5-B</div>
</div>
<br><br>
<span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A → 1B ... 2A → 2B ... 3A → 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>

$(document).ready(function(){
$('#cont-menu .menu').click(function(){
$('.menu').removeClass('active');
//Get the element from each list which matches the position of the clicked element
$('#menu-1').children().eq($(this).index()).addClass('active');
$('#menu-2').children().eq($(this).index()).addClass('active');
});
});
Demo

If the buttons are simply associated by their position in the menu, we can get that position, and then select all elements at the same position in every menu (via the :nth-child selector). To make things easier we add a class to every menu.
$(document).ready(function(){
$('#cont-menu .menu').click(function(){
var index = $(this).index() + 1;
$('.menu').removeClass("active");
$('.menu-container :nth-child('+index+')').addClass("active");
});
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}
.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont-menu">
<div class="menu-container">
<div class="menu active">Buton 1-A</div>
<div class="menu">Buton 2-A</div>
<div class="menu">Buton 3-A</div>
<div class="menu">Buton 4-A</div>
<div class="menu">Buton 5-A</div>
</div>
<div class="menu-container">
<div class="menu active">Buton 1-B</div>
<div class="menu">Buton 2-B</div>
<div class="menu">Buton 3-B</div>
<div class="menu">Buton 4-B</div>
<div class="menu">Buton 5-B</div>
</div>
<br><br>
<span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A → 1B ... 2A → 2B ... 3A → 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>

You're currently only adding the .active class to the clicked button, if we add a identifier for each button (a name) we can achieve what you're asking.
Try:
$(`[name=${$(this).attr('name')}]`).addClass("active");
$(document).ready(function() {
$('#cont-menu .menu').click(function() {
$('.menu').removeClass("active");
$(`[name=${$(this).attr('name')}]`).addClass("active");
});
});
body {
text-align: center;
font-family: Arial, sans-serif
}
.code {
background: #d9d9d9;
padding: 2px 5px
}
#cont-menu span {
line-height: 1.75
}
#cont-menu {
position: relative;
width: 500px;
margin: 0 auto;
top: 5px
}
#menu-1,
#menu-2 {
width: 150px;
display: inline-block;
vertical-align: top;
margin: 0 20px
}
.menu {
padding: 10px 20px 10px 10px;
margin: 0 0 3px 0;
color: #fff;
text-align: left;
background: #999;
cursor: pointer
}
.menu:hover {
background: red
}
.active {
background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cont-menu">
<div id="menu-1">
<div class="menu active" name="button1">Buton 1-A</div>
<div class="menu" name="button2">Buton 2-A</div>
<div class="menu" name="button3">Buton 3-A</div>
<div class="menu" name="button4">Buton 4-A</div>
<div class="menu" name="button5">Buton 5-A</div>
</div>
<div id="menu-2">
<div class="menu active" name="button1">Buton 1-B</div>
<div class="menu" name="button2">Buton 2-B</div>
<div class="menu" name="button3">Buton 3-B</div>
<div class="menu" name="button4">Buton 4-B</div>
<div class="menu" name="button5">Buton 5-B</div>
</div>
<br><br>
</div>

One solution is to use the jQuery data attribute. We set a value for this on each menu that associates it with 1-5, this can then be used to add the class for both menu buttons.
$(document).ready(function(){
$('#cont-menu .menu').click(function(){
//get the value of the data-menu-class attribute
var menuClass = $(this).data('menu-class');
//remove all previous active classes
$('.menu').removeClass("active");
//add active to each menu (1&2)
$('#menu-1 .menu'+menuClass).addClass('active');
$('#menu-2 .menu'+menuClass).addClass('active');
});
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}
.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont-menu">
<div id="menu-1">
<div class="menu menu1 active" data-menu-class='1'>Buton 1-A</div>
<div class="menu menu2" data-menu-class='2'>Buton 2-A</div>
<div class="menu menu3" data-menu-class='3'>Buton 3-A</div>
<div class="menu menu4" data-menu-class='4'>Buton 4-A</div>
<div class="menu menu5" data-menu-classx='5'>Buton 5-A</div>
</div>
<div id="menu-2">
<div class="menu menu1 active" data-menu-class='1'>Buton 1-B</div>
<div class="menu menu2" data-menu-class='2'>Buton 2-B</div>
<div class="menu menu3" data-menu-class='3'>Buton 3-B</div>
<div class="menu menu4" data-menu-class='4'>Buton 4-B</div>
<div class="menu menu5" data-menu-class='5'>Buton 5-B</div>
</div>
</div>

You can use some text manipulation to parse the IDs and button text values, in order to identify which button was clicked, from which menu, and then calculate how to find the same button in the other menu.
This demo's comments assumes you choose Buton 3 from the first menu. The code will:
Traverse UP the DOM tree from the clicked button to find the closest wrapper (Note that I added a class to both button wrappers to make that easy), and grab its ID.
Split the ID on the hyphen, then grab the right-side value (1 or 2)
Use a ternary operator to get the other number (i.e. if this is menu 1, nxt_mnu is 2, etc)
Get the text of this button
Same as (2) above, use split() to get just the text before the -A or -B
Remove .active class from all buttons on all menus
Add .active class to the clicked button
(a) Select the next menu, (b) find the button with text containing same text as the button clicked, (c) Add active class to that sister button
DEMO:
$(document).ready(function(){
$('#cont-menu .menu').click(function(){
debugger;
let mnu_num = $(this).closest('.menu-wrapper').attr('id');
mnu_num = mnu_num.split('-')[1]; //menu-1
let nxt_mnu = (mnu_num == 1) ? '2' : '1'; //2
let btn_txt = $(this).text(); //Buton 3-A
btn_txt = btn_txt.split('-')[0] //eg. Buton 3
$('.menu').removeClass("active");
$(this).addClass("active");
$('#menu-' + nxt_mnu).find('.menu:contains(' +btn_txt+ ')').addClass('active');
});
});
body{text-align:center;font-family:Arial,sans-serif}.code{background:#d9d9d9;padding:2px 5px}#cont-menu span{line-height:1.75}#cont-menu{position:relative;width:500px;margin:0 auto;top:5px}#menu-1,#menu-2{width:150px;display:inline-block;vertical-align:top;margin:0 20px}.menu{padding:10px 20px 10px 10px;margin:0 0 3px 0;color:#fff;text-align:left;background:#999;cursor:pointer}.menu:hover{background:red}
.active{background:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont-menu">
<div id="menu-1" class="menu-wrapper">
<div class="menu active">Buton 1-A</div>
<div class="menu">Buton 2-A</div>
<div class="menu">Buton 3-A</div>
<div class="menu">Buton 4-A</div>
<div class="menu">Buton 5-A</div>
</div>
<div id="menu-2" class="menu-wrapper">
<div class="menu active">Buton 1-B</div>
<div class="menu">Buton 2-B</div>
<div class="menu">Buton 3-B</div>
<div class="menu">Buton 4-B</div>
<div class="menu">Buton 5-B</div>
</div>
<br><br>
<span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A → 1B ... 2A → 2B ... 3A → 3B )<br>and vice versa, of course, are active at the same time...?</span>
</div>

Here I use data attribute with css attribute selector to get the same element in the group. And to get same behaviour with hover effect, I use js to control it instead of css.
$(document).ready(function() {
$('#cont-menu').on('click', '.menu', function(e) {
$('.menu').removeClass('active');
$(`[data-group=${this.dataset.group}]`).addClass("active");
});
$('#cont-menu').on('mouseenter', '.menu', function(e) {
$('.menu').removeClass('hover');
$(`[data-group=${this.dataset.group}]`).addClass('hover')
});
});
body {
text-align: center;
font-family: Arial, sans-serif
}
.code {
background: #d9d9d9;
padding: 2px 5px
}
#cont-menu span {
line-height: 1.75
}
#cont-menu {
position: relative;
width: 500px;
margin: 0 auto;
top: 5px
}
#menu-1,
#menu-2 {
width: 150px;
display: inline-block;
vertical-align: top;
margin: 0 20px
}
.menu {
padding: 10px 20px 10px 10px;
margin: 0 0 3px 0;
color: #fff;
text-align: left;
background: #999;
cursor: pointer
}
.menu.hover {
background: red;
}
.active {
background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cont-menu">
<div id="menu-1">
<div data-group="a" class="menu active">Buton 1-A</div>
<div data-group="b" class="menu">Buton 2-A</div>
<div data-group="c" class="menu">Buton 3-A</div>
<div data-group="d" class="menu">Buton 4-A</div>
<div data-group="e" class="menu">Buton 5-A</div>
</div>
<div id="menu-2">
<div data-group="a" class="menu active">Buton 1-B</div>
<div data-group="b" class="menu">Buton 2-B</div>
<div data-group="c" class="menu">Buton 3-B</div>
<div data-group="d" class="menu">Buton 4-B</div>
<div data-group="e" class="menu">Buton 5-B</div>
</div>
<br><br>
<span>How to change the script so that when you click on the Menu on the left pass the <span class="code">.active</span> class also on the right, so that both buttons.<br>( 1A → 1B ... 2A → 2B ... 3A → 3B )<br>and backwards, of course,
are active at the same time...?</span>
</div>

Related

How to loop through a block of Div element N number of times?

I am trying to display Cards next to one another (4 cards per row). Here is my my html for a Card:
<div class="HelloWorldCard">
<div class="cardwithlink">
<div class="row">
<div class="Hellocard cardwithlink style="height: 170px;">
<a href="//www.https://www.google.com/" title="Google home page" target="">
<div class="content">
<div class="HelloTopSection" style="height: 110px;">
<div class="HelloCardTitle">{{ title }}</div>
<div class="HelloCardExcerpt">{{ description }}</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<Script>
export default{
name: "HelloWordCard",
props:{
title: String,
description: String
},
};
I have about 100 cards that I want to display on my page. I can't just copy and past this html 100 times since that would be a waste of time. Is it possible to print out this block of html in a loop 100 times ?
The real issue I am having is that the cards are displaying 1 card on each row. I am trying to get them to display 4 on each row.
Your row should not be inside your card component.
It should be in a parent component holding the card, where you can apply #Srijan Katuwal's CSS. For example:
<template>
<div id="app">
<div class="row">
<HelloWorldCard
v-for="index in 100"
:key="index"
title="Test"
description="Test description"
/>
</div>
</div>
</template>
<script>
import HelloWorldCard from "./components/HelloWorldCard";
export default {
name: "App",
components: {
HelloWorldCard,
},
};
</script>
<style>
.row {
display: grid;
grid-template-columns: repeat(4, auto);
gap: 30px;
}
</style>
Your component now is:
<template>
<div class="Hellocard cardwithlink" style="height: 170px">
<a href="//www.https://www.google.com/" title="Google home page" target="">
<div class="content">
<div class="HelloTopSection" style="height: 110px">
<div class="HelloCardTitle">{{ title }}</div>
<div class="HelloCardExcerpt">{{ description }}</div>
</div>
</div>
</a>
</div>
</template>
<script>
export default {
name: "HelloWordCard",
props: {
title: String,
description: String,
},
};
</script>
You can see it in action here: https://codesandbox.io/s/hungry-hodgkin-2sklq?file=/src/App.vue:0-476
You can use v-for directive to show a div block for n number of times.
Vue offical documentation has similar example v-for
Also, to display 4 cards in a single row, you can use CSS grid or flex. A grid implementation can be done as below
.row {
display: grid;
grid-template-columns: repeat(4, auto);
gap: 30px;
}
You need to write following CSS to display cards next to each other
* {
box-sizing: border-box;
}
.row {
display: block;
width: 100%;
}
.card {
display: block;
float: left;
width: 25%;
padding: 10px;
border: 1px solid grey;
}
<div class="row">
<div class="card">Card Data</div>
<div class="card">Card Data</div>
<div class="card">Card Data</div>
<div class="card">Card Data</div>
<div class="card">Card Data</div>
<div class="card">Card Data</div>
</div>

VueJS Bulma Sweet modal always toggles to the top of the page inside For loop

I am using Vue JS and Bulma Frameworks. To show the modal I am using .
I have list of items(10) which is displayed in a For Loop. In every item I have a button which opens the sweet modal. No matter which button I click, the modal is displayed at the top of the page always. Can anyone help me how to show the modal near to the clicked button?
Template index.html
<div class="content column is-full-mobile no-devices-found-wraper">
<div class="columns is-mobile">
<div class="column is-full-mobile ">
<div class="columns is-mobile is-marginless">
<div class="column is-half-mobile padding-bottom-
zero padding-top-3">mobile devices:</div>
<div class="column padding-bottom-zero padding-top-3">
<a #click.stop.prevent="openDeviceModal()"
class="add_icon is-pulled-right add-location-btn level-
item">
<i class="fa fa-plus"></i>ADD ITEMS
</a>
</div>
</div>
</div>
</div>
</div>
sweet-modal outside for loop
<sweet-modal class="Add mobile device" ref="deviceAddLocation"
von:close="closeModal">
<form #submit.prevent="saveDeviceToLocation">
<div class="field add-devices-height-with-error">
<label class="label" >mobile device Name</label>
</div>
</form>
</sweet-modal>
//index.vue-- openDeviceModal()//
openDeviceModal() {
this.isModalOpen = true;
this.$refs.deviceAddLocation.blocking = true;
this.$refs.deviceAddLocation.open();
}
//CSS//
.isModalOpen {
height: 100vh;
overflow: hidden;
}
.sweet-modal {
overflow: inherit;
}
.sweet-modal-overlay {
background: transparent !important;
height: 100% !important;
}
.sweet-modal .sweet-content {
padding-top: 10px;
}
.sweet-modal.is-visible {
transform: translate(-62%, -50%) !important
}
sweet-modal .sweet-box-actions {
top: 15px !important;
}

Can't set focus to textbook with javascript

This one has been driving me nuts and I have no clue what the problem is.
I have a quiz that has different kinds of question types (multiple choice, type in the answer, etc) and for each question, I set the innerHTML using a function and then populate it accordingly.
If it's a textbox question, I'd like to automatically set the focus to it. I've tried using javascript, jQuery, and the console window from within Chrome. I've set the tab index to -1. I've looked on this website, but none of the solutions seem to work.
Here's the code:
function populate(){
render_HTML(session.getCurrentItem().itemType);
if(session.getCurrentItem().itemType === "multiple choice"){
//multiple choice
}
else if(session.getCurrentItem().itemType === "typing"){
var element = document.getElementById("questionTest");
element.innerHTML = session.getCurrentItem().primaryText;
console.log("set text");
$( "#inputBox" ).focus();
}
}
.typing .typing-wrapper {
position: relative;
margin-top: 10px
}
.typing .typing-wrapper .typing-box {
width: 100%;
padding: 5.7px 23px;
height: 57px
}
.typing .typing-wrapper .typing-box:focus {
outline: 0;
}
<div class="central-area" id="central-area">
<div class="main typing">
<button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
<div class="next-text">
Next
</div></button>
<div class="question-row row column">
<div class="graphic"></div>
<div class="question-text" id="questionText">
to leave
</div>
</div>
<div class="hint row column">
<span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
</div>
<div class="alert alert-warning typing-alert"></div>
<div class="typing-wrapper">
<span class="marking-icon"></span>
<input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
</div>
</div>
</div>
function populate(){
render_HTML(session.getCurrentItem().itemType);
if(session.getCurrentItem().itemType === "multiple choice"){
//multiple choice
}
else if(session.getCurrentItem().itemType === "typing"){
var element = document.getElementById("questionTest");
element.innerHTML = session.getCurrentItem().primaryText;
console.log("set text");
$( "#inputBox" ).focus();
}
}
.typing .typing-wrapper {
position: relative;
margin-top: 10px
}
.typing .typing-wrapper .typing-box {
width: 100%;
padding: 5.7px 23px;
height: 57px
}
.typing .typing-wrapper .typing-box:focus {
outline: 0;
}
<div class="central-area" id="central-area">
<div class="main typing">
<button class="next-button btn btn-inverse clearfix" id="unique-next-button" onclick="switchPage()" style="display: inline-block;" title="Next [Shortcut : Enter]"><span class="next-icon"></span>
<div class="next-text">
Next
</div></button>
<div class="question-row row column">
<div class="graphic"></div>
<div class="question-text" id="questionText">
to leave
</div>
</div>
<div class="hint row column">
<span class="hint-text">Type the correct <strong>French</strong> for the <strong>English</strong> above:</span>
</div>
<div class="alert alert-warning typing-alert"></div>
<div class="typing-wrapper">
<span class="marking-icon"></span>
<input autocomplete="off" class="shiny-box typing-box" id="inputBox" spellcheck="false" tabindex="-1" type="text">
</div>
</div>
</div>

Deactive bootstrap active label click

I have several groups with a selection of three buttons. I'm trying to make it so that when someone selects the N/A button, it disables the other two buttons. When the N/A button is deselected, the other two buttons are enabled. I have it working on my machine, that the other two buttons are colored as disabled, and have the "disabled" attribute set properly. The problem is, that the buttons/labels can still be clicked on and set the label to active.
I'm having trouble getting my JSFiddle to operate the same as on my machine. It won't disable the other two buttons on the initial N/A click, but it may just be something with JSFiddle. Here is my code, if you want to try it on your own machine:
https://jsfiddle.net/trout0525/huz8macm/7/
<div id="plan-wrapper">
<div class="row plan-title-row">
<div class="col-lg-6" id="plan-title">
Loading...
</div>
<div class="col-lg-6">
<div class="pull-right" id="countdown">
Countdown
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default" style="margin-bottom: 4px;">
<div class="panel-body">
<div class="row" id="master-progress">
</div>
</div>
</div>
</div>
</div>
<div id="plan-file-title" style="margin: 0 0 4px 5px;"></div>
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a data-toggle="tab" href="#planTeam">Team</a></li>
<li role="presentation" class=""><a data-toggle="tab" href="#planResources">Resources</a></li>
<li role="presentation" class=""><a data-toggle="tab" href="#planStatus">Status</a></li>
</ul>
<div class="tab-content" style="background-color: white; padding: 10px; border-left: 1px solid #ddd; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;">
<div id="planTeam" class="tab-pane fade in active">
</div>
<div id="planResources" class="tab-pane fade">
</div>
<div id="planStatus" class="tab-pane fade">
</div>
</div>
</div>
</div>
</div>
Any help would be great.
Got it done on JSFiddle with removal of typos and debugging through developer console, yet it's currently with Chrome, not IE:
https://jsfiddle.net/trout0525/huz8macm/9/
$(".btn-group .btn").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
var $selectedButton = $(this),
$panelDefault = $selectedButton.closest('.panel-default'),
$controlPanel = $panelDefault.find('.panel-heading .pull-right'),
parent = $selectedButton.closest('.panel-default').attr('data-stepId'),
stepId = $selectedButton.closest('li').attr('id'),
spcStat = $selectedButton.attr('id').match(/^(.*?)\d+$/)[1];
var buttonIsActive = $selectedButton.hasClass('active'),
buttonIsDisabled = $selectedButton.attr('disabled');
if ( buttonIsActive || buttonIsDisabled ) {
$selectedButton.removeClass('active');
} else {
$selectedButton.addClass('active');
}
if ($selectedButton.hasClass('not-applicable')) {
var naIsActive = $selectedButton.hasClass('active'),
allButtons = $selectedButton.closest('.btn-group');
if (naIsActive) {
$selectedButton.siblings().removeClass('active');
$(allButtons)
.find('.btn_draft_complete')
.attr('disabled', 'disabled')
.attr('title', 'Disabled. To enable: deselect N/A for this substep')
.find('input')
.css('point-events', 'auto');
$(allButtons)
.find('.btn_done')
.attr('disabled', 'disabled')
.attr('title', 'Disabled. To enable: deselect N/A for this substep')
.find('input')
.css('point-events', 'auto');
} else {
$(allButtons)
.find('.btn_draft_complete')
.removeAttr('disabled')
.attr('title', 'Mark step as Draft Complete')
.find('input')
.removeAttr('disabled')
$(allButtons)
.find('.btn_done')
.removeAttr('disabled')
.attr('title', 'Mark step as Draft Complete')
.find('input')
.removeAttr('disabled')
}
}
});

Display div when clicking on another div

I've added three pictures. Look at them please.
What is the best solution to create something like this? I would create after each row a big container and this container is collapsed. After clicking on one of the 3 overlying containers I would fill the container with the text and show it. But what happens when the display can't show 3 divs in a row, because I will use flex boxes? Is there a better solution with much less jquery?
Maybe something like this is a good place to start:
https://jsfiddle.net/547ec3bx/
HTML
<div class="wrapper">
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
<div class="row">
<div class="element">
</div>
<div class="element">
</div>
<div class="element">
</div>
</div>
</div>
Javascript
document.querySelectorAll('.row').forEach((element, index) => {
element.style.order = index * 2;
});
document.querySelectorAll('.element').forEach(element => {
element.addEventListener('click', event => {
var newRow = document.createElement('div');
newRow.classList.add('row');
newRow.style.order = +event.currentTarget.parentNode.style.order + 1;
var newElement = document.createElement('div');
newElement.classList.add('element');
newRow.appendChild(newElement);
event.currentTarget.parentNode.parentNode.appendChild(newRow);
});
});
CSS
.element {
min-width: 100px;
height: 50px;
flex: 1;
border: 1px solid black;
flex-wrap: nowrap;
}
.row {
width: 350px;
display: flex;
flex-direction: row;
}
.wrapper {
display: flex;
flex-direction: column;
}
you can use javascript to solve this problem , like this ....
html code:
<div id="a">
<h3>wellcome</h3>
</div>
<div id="b">
<h3>hello...</h3>
</div>
javascript code in external file
function goB()
{
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="block";
}
function
{
document.getElementById("b").style.display="none";
document.getElementById("a").style.display="block";
}
Add a div and set its display to Hidden.
Get onclick event for a particular div and set the display property to block
window.addEventListener("load", function(){
document.getElementById("click").onclick = function(){
document.getElementById("div-1").style.display = "block";
};
});
.row
{
width:100%;
}
.one-third
{
width:33.33333%;
float:left;
padding:30px 0;
}
.full-width
{
display:none;
width:100%;
text-align:center;
}
<div class=wrap>
<div class="row">
<div id="click" class="one-third">
Column 1-Click Me
</div>
<div class="one-third">
Column 2
</div>
<div class="one-third">
Column 3
</div>
</div>
<div class="full-width" id="div-1">Full width Div</div>
<div class="row">
<div class="one-third">
Column 1
</div>
<div class="one-third">
Column 2
</div>
<div class="one-third">
Column 3
</div>
</div>

Categories