I have the following code which add and remove a class. But I want to add another class over the image when is active and remove it when is inactive. The problem is that I could added but is going to be active for all elements not only for the one is opened. Does anyone has an idea how to fix this?
https://jsfiddle.net/bmhv3edw/3/
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.plus').attr("src","http://tdhtestserver.herobo.com/plus-eclipse.png");
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(this).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(".plus").attr("src","http://tdhtestserver.herobo.com/plus-eclipse-active.png");
$(this).addClass('active');
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
UPDATED:
$(document).ready(function() {
function close_answer_section() {
$('.question-text').removeClass('active');
$('.plus').attr("src","http://tdhtestserver.herobo.com/plus-eclipse.png");
$('.answer-section-content').slideUp(300).removeClass('open');
}
$('.question-text').click(function(e) {
var currentAttrValue = $(this).attr('href');
if($(this).is('.active')) {
close_answer_section();
}else {
close_answer_section();
$(this).find('img').attr("src","http://tdhtestserver.herobo.com/plus-eclipse-active.png");
$(this).addClass("active");
$('.questions ' + currentAttrValue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
/* body{ background: black }; */
.questions{
padding-top: 25px;
padding-left: 170px;
padding-bottom: 25px;
}
.question{
padding: 5px;
font-size: 18px;
font-weight: 100;
}
.answer-section-content {
display:none;
padding: 2px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="questions">
<div class="question">
<div class="question-text" href="#answer-52"><img class="plus" src="http://tdhtestserver.herobo.com/plus-eclipse.png"/> Question 1</div>
<div id="answer-52" class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
<div class="question">
<div class="question-text" href="#answer-53"><img class="plus" src="http://tdhtestserver.herobo.com/plus-eclipse.png"/> Question 2</div>
<div id="answer-53" class="answer-section-content">
<p>Answer 1</p>
</div>
</div>
</div>
Related
I'm trying to setup multiple-step form in which the first step is visible by default and rest of the steps are hidden with class "hide". I'd like to switch the class with Next and Back button so only one step is visible at a time. Could you please help with this (Already spent an hour on this)
<div class="steps">
<div class="step1">step1</div>
<div class="step2 hide">step2</div>
<div class="step3 hide">step3</div>
<div class="step4 hide">step4</div>
</div>
<div class="back">Back</div>
<div class="next">Next</div>
$('.next').click(function(){
$('div:not(.hide)').next().removeClass('hide');
$('.hide').prev().removeClass('hide')
})
Try combining the 2 actions into one, like so:
$('.next').click(function(){
$('.steps div:not(.hide)').addClass('hide').next().removeClass('hide');
})
That way, you add the .hide class on your current div and then remove it on the next one.
You can use something similar for the Back button, by replacing .next() with .previous()
$('.next').click(function() {
// find the div that is not hidden
var $current = $('.steps div:not(.hide)');
// only perform logic if there is a proceeding div
if ($current.next().length) {
// show the next div
$current.next().removeClass('hide');
// hide the old current div
$current.addClass('hide')
}
});
$('.back').click(function() {
// find the div that is not hidden
var $current = $('.steps div:not(.hide)');
// only perform logic if there is a preceeding div
if ($current.prev().length) {
// show the previous div
$current.prev().removeClass('hide');
// hide the old current div
$current.addClass('hide')
}
});
.hide { display: none; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="steps">
<div class="step1">step1</div>
<div class="step2 hide">step2</div>
<div class="step3 hide">step3</div>
<div class="step4 hide">step4</div>
</div>
<div class="back">Back</div>
<div class="next">Next</div>
You can add a current step variable to track the currently displayed step and two css for styling and showing your content.
jQuery(function($) {
let currentstep = 1;
let maxsteps = 4;
function showstep(step) {
let step_c = '.step' + step;
for (i = 1; i <= maxsteps; i++) {
var step_selector = '.step' + i;
$(step_selector).removeClass('show');
$(step_selector).addClass('hide');
}
$(step_c).removeClass('hide');
$(step_c).addClass('show');
};
$('.next').click(function() {
currentstep = currentstep + 1;
currentstep = (currentstep % (maxsteps + 1));
if (currentstep == 0) currentstep = 1;
showstep(currentstep);
});
$('.back').click(function() {
currentstep = currentstep - 1;
currentstep = (currentstep % (maxsteps + 1));
if (currentstep == 0) currentstep = 4;
showstep(currentstep);
});
});
.hide {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="steps">
<div class="step1 show">step1</div>
<div class="step2 hide">step2</div>
<div class="step3 hide">step3</div>
<div class="step4 hide">step4</div>
</div>
<div class="back">Back</div>
<div class="next">Next</div>
I converted Taplar's answer to a jQuery plugin.
You are essentially navigating left or right by one, using the previous and next functions. These functions navigate through the sibling elements.
(function() {
$.fn.moveRight = function(className) {
var $curr = this.find('div:not(.' + className + ')');
if ($curr.next().length) $curr.next().removeClass(className);
else this.find('div:first-child').removeClass(className);
$curr.addClass(className);
return this;
};
$.fn.moveLeft = function(className) {
var $curr = this.find('div:not(.' + className + ')');
if ($curr.prev().length) $curr.prev().removeClass(className);
else this.find('div:last-child').removeClass(className);
$curr.addClass(className);
return this;
};
})(jQuery);
$('.next').on('click', (e) => $('.steps').moveRight('hide'));
$('.back').on('click', (e) => $('.steps').moveLeft('hide'));
.hide {
display: none;
}
.nav {
width: 260px;
text-align: center;
}
.nav .nav-btn::selection { background: transparent; }
.nav .nav-btn::-moz-selection { background: transparent; }
.nav .nav-btn {
display: inline-block;
cursor: pointer;
}
.steps {
width: 260px;
height: 165px;
border: thin solid black;
text-align: center;
line-height: 165px;
font-size: 3em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="steps">
<div class="step1">step1</div>
<div class="step2 hide">step2</div>
<div class="step3 hide">step3</div>
<div class="step4 hide">step4</div>
</div>
<div class="nav">
<div class="nav-btn back">[ << Back ]</div>
<div class="nav-btn next">[ Next >> ]</div>
</div>
A solution suggested by #musicnothing in an older thread displays a content div below the row of inline divs, this works good when the div.wrapblock is clicked itself.
http://jsfiddle.net/SYJaj/7/
function placeAfter($block) {
$block.after($('#content'));
}
$('.wrapblock').click(function() {
$('#content').css('display','inline-block');
var top = $(this).offset().top;
var $blocks = $(this).nextAll('.wrapblock');
if ($blocks.length == 0) {
placeAfter($(this));
return false;
}
$blocks.each(function(i, j) {
if($(this).offset().top != top) {
placeAfter($(this).prev('.wrapblock'));
return false;
} else if ((i + 1) == $blocks.length) {
placeAfter($(this));
return false;
}
});
});
The issue I'm having.
I need to trigger the same effect, but by adding the click event to a link within the wrapblock itself.
My code is nearly identical.
What I have changed is the click event handle, from $('.wrapblock').click(function() to $('.more').on('click', function() I also needed to add .closest(".wrapblock") for the content div to position itself outside of the wrapblock.
$('.more').on('click', function() {
...
if ($blocks.length == 0) {
placeAfter($(this).closest(".wrapblock"));
return false;
}
Everything can be seen and tested http://jsfiddle.net/7Lt1hnaL/
Would be great if somebody could shed some light on how I can calculate which block it needs to follow with the offset method, thanks in advance.
As you can see in the latest fiddle example, the content div is not displaying below the row of divs.
I also apologise, I wanted to post on the thread in discussion but I only have a minor posting reputation which doesn't let me, thanks.
var $chosen = null;
var $allBlocks = [];
$(function(){
$allBlocks = $('.wrapblock');
})
$(window).on('resize', function() {
if ($chosen != null) {
$('#content').css('display','none');
$('body').append($('#content'));
$chosen.trigger('click');
}
});
$('.more').on('click', function() {
$chosen = $(this);
var position = $chosen.parent('.wrapblock').position();
$('#content').css('display','inline-block');
$allBlocks.filter(function(idx, ele){
return $(ele).position().top == position.top;
})
.last()
.after($('#content'));
});
.wrapblock
{
background: #963a3a;
display: inline-block;
width: 90px;
height: 90px;
color: white;
font-size: 14px;
text-align: left;
padding: 10px;
margin: 10px;
vertical-align:top;
position:relative;
}
#content
{
display:none;
vertical-align:top;
width:100%;
background: #5582c1;
font-size: 12px;
color: white;
padding: 10px;
}
.more {
position:absolute;
bottom:15px;
right:15px;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="wrapblock">1
<span class="more" data-ref="1">more</span>
</div>
<div class="wrapblock">2
<span class="more" data-ref="2">more</span>
</div>
<div class="wrapblock">3
<span class="more" data-ref="3">more</span>
</div>
<div class="wrapblock">4
<span class="more" data-ref="4">more</span>
</div>
<div class="wrapblock">5
<span class="more" data-ref="5">more</span>
</div>
<div class="wrapblock">6
<span class="more" data-ref="6">more</span>
</div>
<div class="wrapblock">7
<span class="more" data-ref="7">more</span>
</div>
<div class="wrapblock">8
<span class="more" data-ref="8">more</span>
</div>
<div class="wrapblock">9
<span class="more" data-ref="9">more</span>
</div>
<div id="content">Some Content</div>
Seems to do what you want. Basically, it just filters down the set of all blocks to the row of the block you clicked on using the assumption that they'll all have the same vertical offset (top), then takes the last one, because jQuery will keep them in document order, so that'll be the last one in the layout row.
Oh, and I updated the fiddle http://jsfiddle.net/7Lt1hnaL/1/
I need to compare which div in an orderd list is the one clicked.
Because I then need to show another div which has the index in a different list.
Everything's properly written, but the comparison is failing (if (ten == $(this))). (Now is chenged for: if (ten.is(this)) {. Works fine)
$(document).ready(function() {
$(".divs2 .os").each(function(e) {
if (e != 0)
$(this).hide();
});
var wybrany;
$(".bt-o").click(function() {
$(".divs2 .os").each(function() { $(this).hide(); });
var ten = $(this);
$(".divs .bt-o").each(function(e) {
if (ten.is(this)) {
$(this).css('background-image', 'url(themes/o2.png)');
wybrany = e;
} else {
$(this).css('background-image', 'url(themes/o1.png)');
}
});
$(".divs2 .os").each(function(e) {
if (e == wybrany)
$(this).show();
});
});
});
// EXTRA ADD FOR YOUR HELP (script for next & prev
$(document).ready(function(){
$(".divs div").each(function(e) {
if (e != 0)
$(this).hide();
});
$("#next").click(function(){
if ($(".divs div:visible").next().length != 0)
$(".divs div:visible").next().fadeIn("slow").prev().fadeOut("slow");
else {
$(".divs div:visible").fadeOut("slow");
$(".divs div:first").fadeIn("slow");
}
return false;
});
$("#prev").click(function(){
if ($(".divs div:visible").prev().length != 0)
$(".divs div:visible").prev().fadeIn("slow").next().fadeOut("slow");
else {
$(".divs div:visible").fadeOut("slow");
$(".divs div:last").fadeIn("slow");
}
return false;
});
});
.bt {
position:absolute;
left: 60px;
}
.bt-o {
padding:35px 50px;
width:54px;
height:29px;
display:inline-block;
font-size: 24px;
color: black;
cursor:pointer;
}
.last {
position:absolute;
left: 1000px;
background-image:url('themes/o22.png');
}
.os {
position:relative;
left: 30px;
top: 75px;
z-index:2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linia">
<a id="prev">PREV</a>
<div class="divs">
<div class="bt"><a class="bt-o">2007</a><a class="bt-o">2008</a><a class="bt-o">2009</a><a class="bt-o">2010</a></div>
<div class="bt"><a class="bt-o">2011</a><a class="bt-o">2012</a><a class="bt-o">2016</a></div>
<div class="bt"><a class="bt-o">2000</a><a class="bt-o">2001</a></div>
</div>
<a id="next">NEXT</a>
</div>
<div class="divs2">
<div class="os"><div class="rok">2007</div>sample</div>
<div class="os"><div class="rok">2008</div>sample</div>
<div class="os"><div class="rok">2009</div>sample</div>
<div class="os"><div class="rok">2010</div>sample</div>
<div class="os"><div class="rok">2011</div>sample</div>
<div class="os"><div class="rok">2012</div>sample</div>
<div class="os"><div class="rok">2016</div>sample</div>
<div class="os"><div class="rok">2000</div>sample</div>
<div class="os"><div class="rok">2001</div>sample</div>
</div>
For Your help I added full working scripts if someone need to use feel free.
Use .is() instead of == to test the equality of two elements.
If you simply try to compare ten to a newly-constructed jQuery object around this, the comparison will fail -- they are distinct objects, created at different times.
is() does a logical comparison of two objects -- do they represent the same DOM element? That's why you don't need to wrap this in $() before comparing.
$(document).ready(function() {
$(".divs2 .os").each(function(e) {
if (e != 0)
$(this).hide();
});
var wybrany;
$(".bt-o").click(function() {
var ten = $(this);
$(".divs .bt-o").each(function(e) {
// test for DOM equality with is()
//
if (ten.is(this)) {
$(this).css('background-color', 'red');
wybrany = e;
} else {
$(this).css('background-color', 'transparent');
}
});
$(".divs2 .os").each(function(e) {
if (e == wybrany)
$(this).show();
});
});
});
.bt-o {
margin: .25em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linia">
<a id="prev"></a>
<div class="divs">
<div class="bt"><a class="bt-o">2007</a><a class="bt-o">2008</a><a class="bt-o">2009</a><a class="bt-o">2010</a><a class="bt-o">2011</a><a class="bt-o">2012</a><a class="bt-o">2016</a></div>
<div class="bt"><a class="bt-o">2000</a><a class="bt-o">2001</a></div>
</div>
<a id="next"></a>
</div>
<div class="divs2">
<div class="os"><div class="rok">2007</div>sample</div>
<div class="os"><div class="rok">2008</div>sample</div>
<div class="os"><div class="rok">2009</div>sample</div>
<div class="os"><div class="rok">2010</div>sample</div>
<div class="os"><div class="rok">2011</div>sample</div>
<div class="os"><div class="rok">2012</div>sample</div>
<div class="os"><div class="rok">2016</div>sample</div>
<div class="os"><div class="rok">2000</div>sample</div>
<div class="os"><div class="rok">2001</div>sample</div>
</div>
You should add an id or any attribute for each div and adjust a little bit your code like this:
//id could be repleace by attribute what you set
if (ten.attr('id') == $(this).attr('id'){
........
}
If you can change the structure of div.divs so that all div.bts are in the same div.bt then this would be really easy :)
$(function() {
$(".bt").on("click", "a", function(e) { // add a click handler on div.bt which only executes the function if the clicked element has the class "bt-o"
// https://learn.jquery.com/events/event-delegation/
var os = $(".os"); // get all elements with class "os"
os.hide(); // hide all of them
var clickedElementIndex = $(this).index(); // get the position of the clicked element relative to its sibling elements
// https://api.jquery.com/index/
os.eq(clickedElementIndex) // get the "os" element at the same position as the clicked "bt-o" element
// https://api.jquery.com/eq/
.show(); // and show it
});
});
/* this rules are only for visual effects :) */
.bt-o {
border: solid 1px black;
cursor: pointer;
}
.os {
display: none;
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="linia">
<a id="prev"></a>
<div class="divs">
<div class="bt"> <!-- only one div.bt for all the a.bt-o -->
<a class="bt-o">2007</a>
<a class="bt-o">2008</a>
<a class="bt-o">2009</a>
<a class="bt-o">2010</a>
<a class="bt-o">2011</a>
<a class="bt-o">2012</a>
<a class="bt-o">2016</a>
<a class="bt-o">2000</a>
<a class="bt-o">2001</a>
</div>
</div>
<a id="next"></a>
</div>
<div class="divs2">
<div class="os"><div class="rok">2007</div>sample</div>
<div class="os"><div class="rok">2008</div>sample</div>
<div class="os"><div class="rok">2009</div>sample</div>
<div class="os"><div class="rok">2010</div>sample</div>
<div class="os"><div class="rok">2011</div>sample</div>
<div class="os"><div class="rok">2012</div>sample</div>
<div class="os"><div class="rok">2016</div>sample</div>
<div class="os"><div class="rok">2000</div>sample</div>
<div class="os"><div class="rok">2001</div>sample</div>
</div>
Slightly simpler method with a little less code, you don't need the event handler e, :
$(".bt-o").on('click', function() {
$(".bt-o").css({ background: 'transparent' }); // clear all backgrounds
$(this).css({ background: '#f90' }); // colour this one
var info = $(this).text(); // get the click text
$('.os').hide(); // hide everything
$('.os').each(function() { // cycle through everything
if ($('.rok', this).text() === info) { // check each targets text
$(this).css({
background: '#bbb'
}).fadeIn('fast'); // colour and reveal
}
});
});
.bt {
position: relative;
width: 80%;
margin-bottom: 10px;
}
.bt-o {
border: 1px solid #f90;
margin-right: 5px;
}
.os {
display: none;
position: relative;
width: 80%;
border: 1px solid #09f;
margin-bottom: 10px;
}
.os div {
display: inline-block;
margin-right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="divs">
<div class="bt"><a class="bt-o">2007</a><a class="bt-o">2008</a><a class="bt-o">2009</a><a class="bt-o">2010</a><a class="bt-o">2011</a><a class="bt-o">2012</a><a class="bt-o">2016</a>
</div>
<div class="bt"><a class="bt-o">2000</a><a class="bt-o">2001</a>
</div>
</div>
<div class="divs2">
<div class="os">
<div class="rok">2007</div>sample</div>
<div class="os">
<div class="rok">2008</div>sample</div>
<div class="os">
<div class="rok">2009</div>sample</div>
<div class="os">
<div class="rok">2010</div>sample</div>
<div class="os">
<div class="rok">2011</div>sample</div>
<div class="os">
<div class="rok">2012</div>sample</div>
<div class="os">
<div class="rok">2016</div>sample</div>
<div class="os">
<div class="rok">2000</div>sample</div>
<div class="os">
<div class="rok">2001</div>sample</div>
</div>
Here is what I have now...
$("#contact").click(function() {
if ( $( "#contact_div" ).length ) {
$("#contact_div").remove();
} else {
var html='<div id="contact_div" class="contact-info"><p>Contact info</p></div>';
$('body').append(html);
}
});
$("#submission").click(function() {
if ( $( "#submission_div" ).length ) {
$("#submission_div").remove();
} else {
var html='<div id="submission_div" class="submission-methods"><p>submission methods</p></div>';
$('body').append(html);
}
});
$("#database").click(function() {
if ( $( "#database_div" ).length ) {
$("#database_div").remove();
} else {
var html='';
$('body').append(html);
}
});
$("#frequent").click(function() {
if ( $( "#frequent_div" ).length ) {
$("#frequent_div").remove();
} else {
var html='<div id="frequent_div" class="Freqeuent kick-codes"><p>frequent kick codes</p></div>';
$('body').append(html);
}
});
#charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;
background-image: url("images/mark-athena-2.png");
background-color: #d4d4d4;
}
a {
text-decoration: none;
font-family: "blessed-facit-semibold", "arial Black", Arial;
color: #999999;
font-size: 12px;
padding: 14px;
}
nav {
background-color: #514a79;
height: 25px;
}
a:hover {
color:#e3e3f2;
}
/* color for link= #e3e3f2 */
div {
height: 100px;
width 150px;
border: solid 1px;
margin: 20px;
overflow: hidden;
background-color: #e6e6e6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script type="text/javascript" src="js/cont.js"></script>
</head>
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
Okay So when I click "Contact Info" on the Nav bar I want the "contact info div" to display or disappear or toggle... same for Submission methods, Data base, and Frequent kick codes. the divs should be able to be toggled to display information inside, and stay displayed until toggled off by the button that toggled them on...
So here is my HTML Code i have created for this project...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
</head>
<body>
<nav>
Home
Contact info
Submission methods
Data base
Frequent kick codes
</nav>
<div class="contact-info">
<p>Contact info</p>
</div>
<div class="submission-methods">
<p>submission methods</p>
</div>
<div class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
And here is my css
#charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;
background-color: #d4d4d4;
}
a {
text-decoration: none;
font-family: "blessed-facit-semibold", "arial Black", Arial;
color: #999999;
font-size: 12px;
padding: 14px;
}
nav {
background-color: #514a79;
height: 25px;
}
a:hover {
color:#e3e3f2;
}
/* color for link= #e3e3f2 */
div {
height: 100px;
width 150px;
border: solid 1px;
margin: 20px;
overflow: hidden;
background-color: #e6e6e6;
}
You could use jQuery .toggle function, documentation and samples are available here.
You can give an 'id' to the individual navigation anchors, and associate a click event that with jQuery will toggle the div you want. I'd use id in all of them, but you can surely work with class too.
The sample code becomes some like:
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
The jQuery/javascript code looks like:
$("#contact").click(function(){
$("#contact_div").toggle();
});
$("#submission").click(function(){
$("#submission_div").toggle();
});
$("#database").click(function(){
$("#database_div").toggle();
});
$("#frequent").click(function(){
$("#frequent_div").toggle();
});
Two notes:
1. the database section is missing in the original post
2. you need to include the jQuery on the page, either you
load it locally on your server, or include it via CDN, like:
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
For the second request on this, the code blocks would to be added/removed based on clicks. The jQuery method change, and for the full working solution you also need to correctly both import jquery, source the javascript code, and have an document.ready handler that will actually initialize the elements. The code looks like this (css remains unchanged).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script type="text/javascript" src="js/cont.js"></script>
<script>
$( document ).ready(function() {
initialize();
});
</script>
</head>
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
with the js/cont.js as:
function initialize() {
$("#contact").click(function() {
if ( $( "#contact_div" ).length ) {
$("#contact_div").remove();
} else {
var html='<div id="contact_div" class="contact-info"><p>Contact info</p></div>';
$('body').append(html);
}
});
$("#submission").click(function() {
if ( $( "#submission_div" ).length ) {
$("#submission_div").remove();
} else {
var html='<div id="submission_div" class="submission-methods"><p>submission methods</p></div>';
$('body').append(html);
}
});
$("#database").click(function() {
if ( $( "#database_div" ).length ) {
$("#database_div").remove();
} else {
var html='';
$('body').append(html);
}
});
$("#frequent").click(function() {
if ( $( "#frequent_div" ).length ) {
$("#frequent_div").remove();
} else {
var html='<div id="frequent_div" class="Freqeuent kick-codes"><p>frequent kick codes</p></div>';
$('body').append(html);
}
});
}
You can do this like this:
Html
<nav>
Home
Contact info
Submission methods
Data base
Frequent kick codes
</nav>
<div class="contact-info" data-container>
<p>Contact info</p>
</div>
<div class="submission-methods" data-container>
<p>submission methods</p>
</div>
<div class="frequent-kick-codes" data-container>
<p>frequent kick codes</p>
</div>
Jquery
$(document).ready(function() {
// initially don't show anything
$('*[data-container]').hide();
// Hide or show the div for that menu item. We don't hide the others because that wasn't asked.
$('*[data-container-class]').click(function(e) {
var className = $(this).data('container-class');
$('.' + className).toggle();
});
});
Jsfiddle example here
I couldn't think of any better title, so I will try to explain my question here as clear as possible. I'm quite a newbie in JQuery so this is probably a very easy question.
I have some divs with a button on it. When you click the button, another div should pop-up.
My question is: How can I make the div, which is already open, close when clicking on another button?
I made a fiddle with some example code: http://jsfiddle.net/zuvjx775/1/
And the example code here:
HTML:
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2"value='click!' />
</div>
<div class="show_2">
</div>
</div>
JQuery:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
$('.show_'+id).show();
});
When show_1 for example is visible, and I click on the button in div2, I want show_2 to come up, which it does, but show_1 to dissapear.
Can someone point me in the right direction?
You can hide all divs that their class starts with 'show' before show the one you want. For example:
$('.showDiv').on('click', function() {
var id = $(this).attr('id');
$("div[class^='show']").hide();//find div class starts with 'show' and hide them
$('.show_' + id).show();
});
.test {
border: 1px solid black;
height: 100px;
width: 450px;
float: left;
}
.show_1 {
width: 50px;
height: 50px;
background-color: yellow;
float: left;
display: none;
}
.show_2 {
width: 50px;
height: 50px;
background-color: green;
float: left;
display: none;
}
.wrapper {
clear: both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="1" value='click!' />
</div>
<div class="show_1">
</div>
</div>
<br>
<div class="wrapper">
<div class="test">
<input type='button' class='showDiv' id="2" value='click!' />
</div>
<div class="show_2">
</div>
</div>
Is the structure of the document fixed?
is so... I guess the easiest way of doing this is to just do the following:
$('.showDiv').on('click', function(){
var id = $(this).attr('id');
if(id == 1){
$('.show_1').show();
$('.show_2').hide();
}else{
$('.show_2').show();
$('.show_1').hide();
}
})