similar to accordion issue but not using accordion - javascript

I have 4 div sections.
<div id= section1> Edit Button
continue button<br/>
</div <br/>
<div id= section2> Edit Button
<br/>
continue button<br/>
</div<br/>
<div id= section3> Edit Button
<br/>
continue button<br/>
</div<br/>
<div id= section4> Edit Button
<br/>
continue button<br/>
</div<br/>
in this scenario when a continue button for a respective section is clicked I will go to the next section where user has to enter inputs in text boxes.
on clicking continue I hide the controls and show a div with all inputs entered by user are written into it.
on clicking edit will show controls section of respective section and hides all other controls sections and edit buttons making user to enter only one section details but nt other sections.
so this happens with each and every section.
my problem is: sections are dynamic.. I can show or hide sections so in that case how do I maintain the continue and edit button functionality?
I need suggestions to achieve this functionality.

Assign a class for edit button and continue button first.
Then write an event handler for the button, hide all first and then make visible the button which was clicked.
Pseudo code:
// hide all button defined by their class name
$(".editButtonClass, .continueButtonClass").hide();
// --> if clicked button is a edit button do your job
if( $(this).hasClass("editButton")) {
// do your job
// --> the button which was clicked should be visible
$(this).show();
}
This is a generic approach so it should work for dynamic elements.

Related

Javascript to show/hide affects all boxes when one is clicked

I added a simple Javascript to show/hide boxes, which works correctly, but when I click on show all the boxes open. How to fix?
$(document).ready(function(){
$(".header").click(function(){
$(".contents").toggle();
});
});
CSS:
.contents{display:none;}
.header{cursor:pointer; user-select:none;}
HTML:
<div class="header">Exemple</div>
<div class="contents">Exemple</div>
I want only that box I clicked to open or close. Thanks
You need to apply show or hide logic is on box so when you click first need to check that show class exist or not if class not exist then add class to hide the box.
In the opposite if click again then if class exist then remove the class so box will be visible.

replacing and hiding gridcontainers

This is what I have:
I have a gridcontainer with three cells where one cell contains three buttons. Each button displays an image below the container.
My javascript code is supposed to make the image disappear if a button is pressed twice butdoes not do so atm. The only way to make it disappear is to either press another picture hence replacing it with a new pic or reload the page.
This is what I want to do:
Instead of replacing and hiding images, I want to replace and hide gridcontainers. So instead of buttons showing pictures they will show a couple of cells with a mix of text and images. The content and layout on this will change when a new button is change, and will totally disappear when the same button is pressed twice. Is this doable.
This is my current javascript:
function changeImage(element){
if(document.getElementById('imageReplace').src==element){
document.getElementById('imageReplace').src="";
} else{ document.getElementById('imageReplace').src=element; }
it is activated by this html:
<div class="cell"><h2>Top reasons you should have a digital self
defense</h2>
<button class="infobutt"
onclick="changeImage('survcap1.jpeg');">Intellectual
freedom</button>
<button class="infobutt"
onclick="changeImage('survcap2.jpeg');">protect vulnerable
groups</button>
<button class="infobutt"
onclick="changeImage('survcap3.jpeg');">Take control over your
life</button></div>"
and correponds further with this html (Situated outside and below the container, also below main tag):
<img src="" alt="Images" id="imageReplace"/>
What is wrong with my current code and how can I improve it to suit my purpose?

click button simulates clicking a dropdown hidden

I do not know if it's possible, but wanted to have a jsp page when loaded uam dropdown does not appear, but when I click a button.
Basically I want a button that makes the select box. that when clicked appear a list "option".
Already experimenting with various js events and jquery but none works. I had a div with style = "display: none;" and within the div I have the select. and wanted to show the option only when you click a button. It is possible ?
Thanks for listening
try this
$(document).ready(function(){
$('.mySelectbox').hide();
$('.myButton').click(function(){
$('.mySelectbox').val(-1); //clear selection of selectbox
$('.mySelectbox').show(); //show make the magic
});
});
this work for you?

text inputs don't show or hide when it should do

I have a jsfiddle here: http://jsfiddle.net/ybZvv/22/
The situation I have is that if you click on "Select All Answers" button, it will turn on all the letter buttons (al trun green). Now if you click on the "Add Question" button it appends the buttons from the top into a table row. You will see a bunch of text inputs appear below the table, this shows the values of all of the buttons which are turned on in the appended row.
This is fine. But the problem is below:
The problem though is that if you click on the "Remove All Answers" button IN THE APPENDED ROW, then all of the buttons are turned off which is fine but it does not remove/hide the text inputs for all of those values which buttons are turned off.
If you then click on the "Select All Answers" button IN THE APPENDED ROW, then it turns all ofthe buttons in the row but no text input appears showing all of the values which buttons are turned on.
So my question is that if the user clicks on the "Select All Answers" button in an appended table row, how can we get it to display all of the text inputs of the buttons which are turned on in that row?
Also if the user clicks on the "Remove All Answers" button in the appended row, I want it to remove all of the text inputs of those buttons turned off within that row. How can this be achieved?
The solution is to "trigger" a click on the buttons instead of simply taking off one class and adding another.
So instead of
$('.answerBtns:visible', context).removeClass('answerBtnsOff').addClass('answerBtnsOn');
you should use:
$('.answerBtnsOff:visible', context).trigger('click');
to simulate a click on the button to do proper handling.
Here's the edited fiddle

Having Problems with Hide/Show Functionality in jQuery

I have some divs which are structured like this:
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
<div>
<div><a>more Info</a></div>
</div>
<div>
<div><a>more Info</a></div>
<div><a>more segments</a></div>
</div>
.......
These divs are being generated dynamically. Some divs contain 2 hyperlinks (like the 1st div), some contain only one hyperlink (like the 2nd div).
When I click on moreInfo link, it has to display one div which contains some information. When I click on another link, the previously displayed div should be hidden and open appropriate div associated with that link.
When I click on moresegments link, it has to display number of segments and all moreInfo links should be disabled. Each segment consists of moreInfo link(segment consists the code just like 2nd div). After click on moreInfo link in each segment. It has to behave like in point1.This is my sample code http://jsfiddle.net/H5R53/16/In the above code, when I click on moreInfo link it displays one div which contains some information .Upto this it's working fine. Now my problem is, when I click on the same link again it doesn't show the Information again. And also when I click on moresegments link the moreInfo links( which are not child of moresegments link) should be disable and all opened div's( which are opened when click on moreInfo link) should be close. Anyone please help me.
If I understand your issue correctly, you want to hide the div #moreInfo if the user wants to open another one.
If so,
JQUERY
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
YOUR JQUERY WITH THAT CONTROL ADDED
$('.moreInfLink').live('click',function(){
if ($('#moreInfo').size()==1) {
$('#moreInfo').remove();
}
$(this).after("<div id='moreInfo'>sdasdad<br/>sdasdad<br/>sdasdad<br/><div id='close'>close</div></div>");
});
And your Fiddle Updated!

Categories