Show/Hide div with sub div using button click JavaScript - javascript

How can I make a div show/hide with a sub div like:
<div class="form-group" style="display:none;">
<div id="tabicon" style="display:none;">
<span>ICON</span>
</div>
<div id="tabimages" style="display:none;">
<span>IMAGES</span>
</div>
</div>
<div id="button_tab">
<input type="button" name="btnicon" value="icon">
<input type="button" name="btnimages" value="images">
</div>
So that when I click btnicon, the tab icon is opened/showing and
when I click btnimages, the tab images is opened/showing, with the tab icon hidden?

Do it with simple jquery by defining which div has to shown on which button click.
$('btnicon').on('click', function(){
$('#tabicon,.form-group').show();
});
$('btnicon').on('click', function(){
$('#tabimages,.form-group').show();
});
If you want to show this div and hide another div on button click use this
$('btnicon').on('click', function(){
$('#tabicon,.form-group').show();
$('#tabimages').hide();
});
$('btnicon').on('click', function(){
$('#tabimages,.form-group').show();
$('#tabicon').hide();
});

$('input[name=btnicon]').click(function(){//icon click
$('#tabicon').show()//show icon div
$('#tabimages').hide()//hide image div
}).click()//manually call click to show icon div on load
$('input[name=btnimages]').click(function(){//image click
$('#tabicon').hide()//hide icon div
$('#tabimages').show()//show image div
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<div id="tabicon" style="display:none;">
<span>ICON</span>
</div>
<div id="tabimages" style="display:none;">
<span>IMAGES</span>
</div>
</div>
<div id="button_tab">
<input type="button" name="btnicon" value="icon">
<input type="button" name="btnimages" value="images">
</div>

Try this : You have to remove display:none from parent div as this will hide all its child elements. Create button handler and use .show() and .hide() methods as shown below -
HTML:
<div class="form-group">
<div id="tabicon" style="display:none;">
<span>ICON</span>
</div>
<div id="tabimages" style="display:none;">
<span>IMAGES</span>
</div>
</div>
<div id="button_tab">
<input type="button" name="btnicon" value="icon">
<input type="button" name="btnimages" value="images">
</div>
jQuery:
$(function(){
$('input[name="btnicon"]').click(function(){
$('#tabicon').show();
$('#tabimages').hide();
});
$('input[name="btnimages"]').click(function(){
$('#tabicon').hide();
$('#tabimages').show();
});
});

Instead of setting the "hidden" properties directly to the elements you are hiding/displaying you could set the properties through adding and removing classes to the parent container. "form-group".
.parent-class, #tabicon, #tabimage {
display: none;
}
.parent-class.icon-class, .parent-class.image-class {
display: block;
}
.parent-class.icon-class #tabicon{
display: block;
}
.parent-class.image-class #tabimage {
display: block;
}
This way when you add the class to the parent container you will show hide the parent container based on it having either of the childs active. The current child you have set to active will also be visible based on which classes are active in the parent container.
If none of the childs are active the parent container will be hidden.

Related

I can't handle to select the correct div (using Jquery)

$(document).ready(function() {
$(".myClass").click(function () {
$(".myClass", $(this)).first().scrollIntoView({behavior: "smooth",block: "start"});
});
});
.myClass {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=myClass>I click on this div
</div>
<div class=otherClass>Some random text
</div>
<div>
<div class=otherClass>Some random text
</div>
<div>
<div class=myClass>I want to scroll to this div
</div>
Here is my problem, i have this pattern that repeats itself several times in my page. Div having the class "otherClass" are generated dynamically in variable quantity.
<div>
<div class=myClass>
</div>
</div>
<div>
<div class=otherClass>
</div>
</div>
<div>
<div class=otherClass>
</div>
</div>
<div>
<div class=myClass>
</div>
</div>
My goal is by clicking on a "myClass" div to scroll down the window (using scrollIntoView()) to the next div with the same class.
I added a click event on each "myClass" div but i can't manage to select the next one. I tried to add a context to my selector $(".myClass", $(this)) to search only after the clicked div but it doesn't work (always returning me the current div ?).
I also tried using next() to "move" to the next div but i'm struggling with the fact that there is an unknown numbers of "otherClass" div between them.
What am i doing wrong ?
Sorry if my explanation isn't clear and thank you for your help.
Up to your html structure .myClass doesn't have any next .myClass on its level .. See the next code
$('.myClass').on('click' , function(){
$(this)
.parent() // select the parent div
.nextAll('div:has(.myClass)') // select the next div which has .myClass in it
.first() // select just one div next
.find('.myClass') // find the .myClass in this div
.addClass('Next'); // add class to it
});
.Next{
background : red;
color : #fff;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<div class=myClass>myClass</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=myClass>myClass</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=otherClass>Other</div>
</div>
<div>
<div class=myClass>myClass</div>
</div>
Additional: if you need to reverse you'll need to use prevAll instead of nextAll and .last() instead of .first()
This will work no jQuery needed.
Here is the fiddle example: https://jsfiddle.net/e1xz74wj/
JS
let scrollToNext = 0;
const elements = document.querySelectorAll('.myClass');
document.getElementById('btn').addEventListener('click', () => {
++scrollToNext
if (scrollToNext < elements.length) {
elements[scrollToNext].scrollIntoView();
}
})
Explanation:
Increment the counter after clicking on the button to scroll to the desired element (finding element by specified className).
Each time a click occurs the counter is incremented by one hence the next element is selected. When the counter reaches the max amount of found elements it doesn't increment anymore.

Add class to previous element

I just want to add class for the button after another class but it's inside of another div. Take a look at this example.
<div class="wrap">
<button class="one">Click</button>
<button class="two">Click</button>
</div>
<div class="bottom"></div>
.add-me{
color:red;
}
In here, I want to add to class button one. But it needs to be applied when bottom class appears.(This is a validation message. So I can't style directly to button one.)
I tried with this way. But it only apply for wrapper div.
$('.bottom').prev('div').first().addClass('add-me');
Here is the fiddle: https://jsfiddle.net/eqhj0vm9/2/
You have to use $('.bottom').prev().find(':first-child').addClass('add-me'); to select the prev element's first child.
$(function() {
$(".activate").click(function(){
$('.bottom').show();
$('.bottom').prev().find(':first-child').addClass('add-me');
});
});
.add-me {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<button class="one">Click</button>
<button class="two">Click</button>
</div>
<div class="bottom" style="display:none"> BOTTOM CLASS </div>
<br />
<button class="activate">Activate bottom class</button>

Hiding/Showing divs on click

I have created a script that when a button is clicked it displays all of the content beneath it and hides the other buttons content. The only problem I'm having is that I want to refactor the script so it only works if you hit the button, instead of the entire div the button sits in as it's causing some confusion. What would be the best way about this?
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
<div class="signup-button">
<button type="button" class="btn btn-default">Subscribe</button>
<div class="signup-form" style="display:none;">
Content
</div>
</div>
jQuery:
(function($) {
$(".signup-button").on('click', function() {
$(".signup-button").not(this).find(".signup-form").hide();
$(this).find(".signup-form").toggle("slow");
});
})(jQuery);
JSFiddle: https://jsfiddle.net/v6bmphct/3/
One option would be to attach the event listener directly to the descendant button element. In doing so, the click event isn't triggered when clicking on the other content. You would also have to change instances of $(this) to $(this).parent() or $(this).closest('.signup-button').
Updated Example
$(".signup-button .btn").on('click', function(e) {
$(this).parent().find(".signup-form").toggle("slow");
$(".signup-button").not($(this).parent()).find(".signup-form").hide();
});
Alternatively, since event.target is a reference to the clicked element, you could also just check to see if event.target is the button element by using the .is() method:
Updated Example
$(".signup-button").on('click', function(e) {
if ($(e.target).is('.btn')) {
$(this).find(".signup-form").toggle("slow");
$(".signup-button").not(this).find(".signup-form").hide();
}
});
Check this out:
(function($) {
$(".signup-button").find('button').on('click', function() {
$(this).siblings(".signup-form").toggle("slow");
$(".signup-button").not(this.closest(".signup-button")).find(".signup-form").hide();
});
})(jQuery);

How to show/hide single div only with jquery .slidetoggle

How to show/display a single one div only when user click with jquery
For example when user click the "Promo" the promo content will show,
and when user click "Sports" the sports content will display and the promo content will hide... so on
I have this working code but when I click it shows all the content at once.
HTML
<div class="clickto_showme">Promo</div>
<div class="showcontent">
<p> Content for promo </p>
</div>
<div class="clickto_showme">Sports</div>
<div class="showcontent">
<p> Content for Sports </p>
</div>
<div class="clickto_showme">News</div>
<div class="showcontent">
<p> Content for News </p>
</div>
CSS
.showcontent {
display: none;
}
JS
$('.clickto_showme').click(function() {
$('.showcontent').slideToggle('slow');
return false;
});
A working JSFIDDLE is here http://jsfiddle.net/jowa513p/2/
Use $(this) to manipulate the required element relative to the current element clicked; and next() to get the sibling.
$('.clickto_showme').click(function() {
$(this).next('.showcontent').slideToggle('slow');
return false;
});
Updated Fiddle

On click not working after appending checkbox elements in jquery

The contact_container div holds contact children, within these children is a checkbox. I use ajax to append these children to the container. Once I append the html and click a childs checkbox. The .click does not recognize the newly added checkboxes, Only the children work on page load. Below are working samples of my HTML and Jquery.
Can you offer a solution so that the appended checkboxes are picked up when they are clicked? Thanks
Here is my HTML markup:
<div id="contact_container">
<div class="contact">
<div class="contact_checkbox">
<div class="checkbox_container">
<div class="checkbox">
<input class="testing_checkbox" type="checkbox" name="contacts[]" value="bf6b0049059ec8998601f8fe20acb68ecafe2d44">
</div>
</div>
</div>
<div class="contact_info">
<div class="contact_image">
<img src="image.jpg" width="50" height="50" alt="Profile Picture">
</div>
<div class="contact_name"><span>Caroline Airey</span>
</div>
</div>
</div>
</div>
<div id="x_message" class="inputdata" style="overflow: hidden; display: none;">
<label>Message:</label>
<span><textarea name="x_message" placeholder="Enter a message to send to your contact(s)"></textarea></span>
<div class="clear"></div>
<button class="form_button">Add Contact to Network</button>
</div>
Here is my Jquery:
$( ".checkbox" ).click(function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
You will need the Parent reference to bind the element properly to jquery try this
$(parentObj).on("click",".checkbox",function() {
var checked = $('.testing_checkbox:checked').length;
$('#testing').val(checked);
if (checked > 0){
$('#x_message').show(1000);
}
else{
$('#x_message').hide(1000);
}
});
The parentObj is the div or the html element you've appended the html code with ajax call
Use this jQuery method instead:
$(".checkbox").on("click", function()
{
// Your code here
});
This will grab clicks from elements that are dynamically added to your page after it initially loads :)

Categories