I have a block of HTML:
<form>
<section>
<div class="row normalTopPadding personalInfomation">
<!--Loads of HTML and Stuff-->
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
<section>
<div class="row normalTopPadding employerInfomation">
<!--Loads of HTML and Stuff-->
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
<section>
<div class="row normalTopPadding accountInfomation">
<!--Loads of HTML and Stuff-->
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
</form>
What I'm trying to achieve is for every time a button is clicked to hide the panel that the button has been clicked from and display the next panel down, so..
<script>
$('.personalInfomation .reg-next-button, .employerInformation .reg-next-button', .accountInformation .reg-next-button').click(function (e) {
// Get the section that this button lives in
var form = $(this).closest("section");
//validation and other functions commented out for ease of reading
// Hide this section...
section.toggle();
// And show the next section
section.next().toggle();
});
</script>
Although this hides the section that the button has been clicked from it doesn't display the next one down.
Could someone point out my mistake?
Thanks,
C
you can check if next section is available or not and then hide current section.
NOTE: there is extra single quote in your jquery selector, which i have removed. Also, you have declared variable form but used section, so rename form to section
$('.personalInfomation .reg-next-button, .employerInformation .reg-next-button, .accountInformation .reg-next-button').click(function (e) {
// Get the section that this button lives in
var section = $(this).closest("section");
//validation and other functions commented out for ease of reading
// Hide this section...
var $next = section.next();
if($next.length>0) { // check condition first and then hide current section and show next
section.toggle();
// And show the next section
$next.toggle();
}
});
Instead of putting each section in button click handler you can generalise it and improve your code so that when you add new section you don't need to change your script.
NOTE - do not use same id for multiple html elements as you have used it for button
$(function(){
$('section .row.normalTopPadding .reg-next-button').on('click', function (e) {
var section = $(this).closest("section");
var $next = section.next();
if($next.length>0) { // check condition first and then hide current section and show next
section.addClass('hide');
$next.removeClass('hide');
}
});
});
.hide {
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<section>
<div class="row normalTopPadding personalInfomation">
<!--Loads of HTML and Stuff-->
This is SECTION 1
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
<section class="hide">
<div class="row normalTopPadding employerInfomation">
<!--Loads of HTML and Stuff-->
This is SECTION 2
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
<section class="hide">
<div class="row normalTopPadding accountInfomation">
<!--Loads of HTML and Stuff-->
This is SECTION 3
<a id="myButton" class="reg-next-button btn btn-default">Next</a>
</div>
</section>
</form>
You may try to hide all the sections first, and then on click of a, find the next .row to be shown.
See the demo below:
$('.row').not(':first').css('display', 'none');
$('.row > a').click(function() {
$(this).parents('.row').toggle();
$(this).parents('section').next('section').find('.row').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<section>
<div class="row normalTopPadding personalInfomation">
<!--Loads of HTML and Stuff-->
<a id="myButton" class="reg-next-button btn btn-default">Next 1</a>
</div>
</section>
<section>
<div class="row normalTopPadding employerInfomation">
<!--Loads of HTML and Stuff-->
<a id="myButton" class="reg-next-button btn btn-default">Next 2</a>
</div>
</section>
<section>
<div class="row normalTopPadding accountInfomation">
<!--Loads of HTML and Stuff-->
<a id="myButton" class="reg-next-button btn btn-default">Next 3</a>
</div>
</section>
</form>
Related
I have a few buttons in the HTML file code with Bulma similar like this:
<a class="button" data-target="A">Section A</a>
<a class="button" data-target="B">Section B</a>
<a class="button" data-target="C">Section C</a>
And there are a few section like this which can interact with the buttons:
<div id="A" class="contentswitch">
<article class="message">
<div class="message-header" id="h1">
<p>Section A-1</p>
</div>
<div class="message-body">
Message 1 of section A
</div>
<div class="message-header">
<p>Section A-2</p>
</div>
<div class="message-body">
Message 2 of section A
</div>
</article>
</div>
As I add code like this in the JS, it can add a class called "is-hidden" to all the div ejectment which contains "contentswitch" class.
$("a.button").on("click", function(){
$("div.contentswitch").addClass("is-hidden");
});
What can I do if I want to remove the class ("is-hidden") from specific div element, like if I click the button of Section A, then it add "is-hidden" class to all the div element contain content switch then remove it from the div element with the id "A"?
Thank you so much
You can use data-target to connect the clicked button to the div you want to show. And hide the rest of them.
Also, use button iso a tag. a tag has a specific purpose in HTML and should be used only in combination with href attribute.
const buttons = $('.button');
const contentSwitchDivs = $('.contentswitch');
buttons.on("click", function(){
const btnTarget = $(this).data('target')
const contentToShow = $(`#${btnTarget}`)
contentSwitchDivs.not(btnTarget).hide();
contentToShow.show();
});
.contentswitch {
display: none
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button" data-target="A">Section A</button>
<button class="button" data-target="B">Section B</button>
<button class="button" data-target="C">Section C</button>
<div id="A" class="contentswitch">
A contentswitch
</div>
<div id="B" class="contentswitch">
B contentswitch
</div>
<div id="C" class="contentswitch">
C contentswitch
</div>
The click of the button should toggle the visibility of that corresponding button's div. the first pic is what the code should look like from the start, and the second pic shows what the code should look like after clicking the submit button 1.
.toggleDiv{
background: gray;
max-width: 400px;
}
<!DOCTYPE html>
<html>
<script src="script.js"></script>
<link rel="stylesheet" href="styles.css">
<body>
<div class="toggleNav">
<div class="Button1">
<input onclick="toggleMain" type="image" src="images/vinylBtn.png">
Button1
</div>
<div class="Button2">
<input onclick="toggleMain" type="image" src="images/cdBtn.png">
Button2
</div>
<div class="Button3">
<input onclick="toggleMain" type="image" src="images/tapeBtn.png">
Button3
</div>
</div>
<div class="toggleDiv">
<div id="mainText">
<h2>main div</h2>
<p>This is where the different divs shouls be toggling
</div>
<div id="Button1">
<p>This is the first div</p>
</div>
<div id="Button2">
<p>This is the second div</p>
</div>
<div id="Button3">
<p>This is the third div</p>
</div>
</div>
</body>
</html>
You can find all you elements by tag a in toggleNav and then add event listener. See my example in playground https://jsfiddle.net/denisstukalov/ompaeL0d/29/:
const links = document.querySelectorAll("div.toggleNav div a");
for (var i = 0; i < links.length ; i++) {
const divId = links[i].innerText
links[i].addEventListener("click",
function (event) {
event.preventDefault();
document.getElementById(divId).style.display = 'block';
},
false);
}
I have dynamically generated div's whose content contains an anchor link and path to an image.
I also have a modal box with an image tag in.
What I am trying to do is onclick of the anchor link, set the image tag path which is in the modal box.
Currently what my code does is no matter what anchor link I click, its always setting image path to the first path link.
Here is my JSFiddle link
JSFiddle
My Code:
<div id="coupon-listing-items" class="shopping-listings listings">
<div class="left-split">
<a class="ads-links" title="Test Title One" href="http://www.test.com/"><h2>Test Title One</h2></a><div class="coupon-text">(Get 20% of by staying 2 nights)</div>
<span id="sLink" class="hide">http://via.placeholder.com/350x250</span>
</div>
<div class="left-split">
<a class="ads-links" title="Test Title Two" href="http://www.test.com/"><h2>Test Title Two</h2></a><div class="coupon-text"></div>
<span id="sLink" class="hide">http://via.placeholder.com/400x350</span>
</div>
</div>
<!-- Modal Box -->
<div class="modal CouponModal">
<span class="close-modal">×</span>
<div class="modal-content">
<input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
<div id="cp-image">
<img id="coupon-image" />
<div id="caption">
<span class="vist">Visit the website: <a id="c-weblink"></a></span>
</div>
</div>
</div>
</div>
$(".ads-links").each(function(index){
$(".ads-links").on("click", function(e){
e.preventDefault(); var imgsrc = document.getElementById('sLink')
$(".CouponModal").css('display', 'block');
$("#coupon-image").attr('src',imgsrc.innerHTML);
});
$(".close-modal").click(function(e) {
$(".CouponModal").css('display', 'none');
});
});
If you click on Test title one, you will image name 350x250 displayed in the modal box, and if you close the modal box and now click on test title two, instead displaying the image 450x350 just displays the first image.
What am I missing?
Thanks and appreciate it
You are selecting the first sLink no matter which is anchor is clicked.
var imgsrc = document.getElementById('sLink');
Instead you need to base this on the sLink closest to the anchor clicked.
var imgsrc = $(this).parent().find('#sLink')[0];
//This goes up a level and finds the sLink that is in that same parent//
Note
that an ID should be unique and is likely causing part of your confusion, in this case a class might be just as useful.
your outer loop is superfluous and might cause you trouble down the road.
Updated Your Fiddle: https://jsfiddle.net/0dmc9rvt/25/
$(".ads-links").each(function(index) {
$(this).on("click", function(e) {
e.preventDefault();
debugger;
$(".CouponModal").css('display', 'block');
$("#coupon-image").attr('src', $(this).parent().find('.sLink').html());
});
$(".close-modal").click(function(e) {
$(".CouponModal").css('display', 'none');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="coupon-listing-items" class="shopping-listings listings">
<div class="left-split">
<a class="ads-links" title="Test Title One" href="http://www.test.com/">
<h2>Test Title One</h2>
</a>
<div class="coupon-text">(Get 20% of by staying 2 nights)</div>
<span class="hide sLink">http://via.placeholder.com/350x250</span>
</div>
<div class="left-split">
<a class="ads-links" title="Test Title Two" href="http://www.test.com/">
<h2>Test Title Two</h2>
</a>
<div class="coupon-text"></div>
<span class="hide sLink">http://via.placeholder.com/400x350</span>
</div>
</div>
<!-- Modal Box -->
<div class="modal CouponModal">
<span class="close-modal">×</span>
<div class="modal-content">
<input type="button" class="btnprint" name="btnprint" value="Print This Coupon" onclick="PrintC('cp-image')"/>
<div id="cp-image">
<img id="coupon-image" />
<div id="caption">
<span class="vist">Visit the website: <a id="c-weblink"></a></span>
</div>
</div>
</div>
</div>
Once a button is clicked, and it loads the content from a difference source. How would I stop it from reloading the content again, especially when I click through other buttons? Below, I have button working as tabs/toggles. I have it where once I click on a button, it loads the content in a div. The content is a bunch of checkboxes with values, which the values are different for each tab. Currently I have it where if you click on button, it brings the content, but then when you click on another button to check other checkboxes, it erases the previous content checked. Want to be able to click on button, check what I need to, go to another button to display content and go back to the original if need to.So How would I only load the content just once to keep it from uploading again and erasing the previous content?
Button HTML
<ul class="category">
<li>WEBSITE</li>
<li>PAGES</li>
<li>DOCUMENTATION</li>
</ul>
Code to the container which will display the checkboxes of products the user can choose from.
<div id="product_container" >
<div class="website box" >
<div class="tx-row" id='webin' >
</div>
<div class="tx-row" id='webx' >
</div>
</div>
<div class="page box" >
<div class="tx-row" id='pagein' >
</div>
<div class="tx-row" id='pagex' >
</div>
</div>
<div class="document box" >
<div class="tx-row" id='documentin' >
</div>
<div class="tx-row" id='documentx' >
</div>
</div>
</div>
JQuery on loading the content of checkboxes per category.
$(document).ready(function(){
var $content = $('.box');
function showContent(type) {
$content.hide().filter('.' + type).show();
}
$('.category').one('click', '.web-btn', function(e) {
$("#webin").load("/wp-content/themes/child/search-web.php");
$("#webx"+").load("/wp-content/themes/child/search-notlikeweb.php");
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
});
$('.category').on('click', '.page-btn', function(e) {
$("#pagein").load("/wp-content/themes/child/search-page.php");
$("#pagex").load("/wp-content/themes/child/search-notlikepage.php");
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
});
$('.category').on('click', '.document-btn', function(e) {
$("#documentin").load("/wp-content/themes/child/search-document.php");
$("#documentx").load("/wp-content/themes/child/search-notlikedocument.php");
showContent(e.currentTarget.hash.slice(1));
e.preventDefault();
});
$(".box").hide();
});
I dont think you want to be using .load() here.
It would probably be better to just have 3 diffrent tabs in your HTML and toggling them instead.
So you just load the content once to each div. Maybe this will help you:
$('.toggle').on('click', function(){
var $target = $($(this).data('target'));
$target.siblings().removeClass('active');
$target.addClass('active');
});
.box {
display: none;
}
.box.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="product_container" >
<div class="website box active" >
<div class="tx-row" id='webin' >
Content for website box
</div>
<div class="tx-row" id='webx' >
</div>
</div>
<div class="page box" >
<div class="tx-row" id='pagein' >
Content for page box
</div>
<div class="tx-row" id='pagex' >
</div>
</div>
<div class="document box" >
<div class="tx-row" id='documentin' >
Content for document box
</div>
<div class="tx-row" id='documentx' >
</div>
</div>
</div>
<button class="toggle" data-target=".website.box">Toggle website</button>
<button class="toggle" data-target=".page.box">Toggle page</button>
<button class="toggle" data-target=".document.box">Toggle document</button>
I'm trying to create a list of buttons that when one is clicked it displays that DIV and hides the rest. There is also a default message that shows before any button is clicked.
I've created a codepen already and I think there is something wrong with my script, but I can't work out what I am doing wrong. Any help?
Here is the script I am trying:
<script>
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:selected", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
</script>
Here is the Codepen.
Instead of doing it on div click .
Do it by button click:
Just simple code:
$(document).on('click', '.map-point-sm', function() {
var show = $(this).data('show');
$(show).removeClass("hide").siblings().addClass("hide");
});
You can check pan code here:
http://codepen.io/sagar_arora/pen/BRBopY
Change your code
var show = $("button:selected", this).data('show');
to
var show = $("button:focus", this).data('show');
TRY THIS
$(document).on('click', '.div-toggle', function() {
var target = $(this).data('target');
var show = $("button:focus", this).data('show');
$(target).children().addClass('hide');
$(show).removeClass('hide');
});
$(document).ready(function(){
$('.div-toggle').trigger('click');
});
.hide {
display: none;
}
.map-container {
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="map-container">
<div class="inner-basic division-map div-toggle" data-target=".division-details" id="divisiondetail">
<button class="map-point" data-show=".darwin">
<div class="content">
<div class="centered-y">
<p>Darwin</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".ptown">
<div class="content">
<div class="centered-y">
<p>Ptown</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".philly">
<div class="content">
<div class="centered-y">
<p>Philly</p>
</div>
</div>
</button>
<button class="map-point-sm" data-show=".dela">
<div class="content">
<div class="centered-y">
<p>Dela</p>
</div>
</div>
</button>
</div><!-- end inner basic -->
</div>
<div class="map-container">
<div class="inner-basic division-details">
<div class="initialmsg">
<p>Choose button above</p>
</div>
<div class="darwin hide">
<p>Darwin Content here</p>
</div>
<div class="ptown hide">
<p>Ptown Content here</p>
</div>
<div class="philly hide">
<p>Philly Content here</p>
</div>
<div class="dela hide">
<p>Dela Content here</p>
</div>
</div>
</div>