How to show overflow hidden element in div jquery - javascript

In my application there are a lot of buttons inside a div.
Initially I am showing three buttons in div width 400 px. Overflow:hidden will hide the remaining elements. I have added below css for div, having right arrow button in my application.
Can anybody body tell how I, if user clicks arrow button, can show next button elements occupying the same width in jquery? If user clicks again I need to show remaining elements up to last element
My html structure is below
.parentdiv {
display: inline-flex width:400px;
overflow: hidden;
}
<div class="parentdiv">
<div class="childdiv">
<span> Text1
<button>button1 </button>
</span>
</div>
<div class="childdiv">
<span> Text2 lorem ipsum
<button>button2 </button>
</span>
</div>
<div class="childdiv">
<span> Text3 lorem ipsum
<button>button3 </button>
</span>
</div>
<div class="childdiv">
<span> Text4 lorem ipsum
<button>button4 </button>
</span>
</div>
<div class="childdiv">
<span> Text5 lorem ipsum
<button>button5 </button>
</span>
</div>
<div class="childdiv">
<span> Text6 lorem ipsum
<button>button6 </button>
</span>
</div>

What you want to do is.... a LOT more complicated than you think it is, and will require a lot of javascript.
It's usually not worth it to try to reinvent the wheel by hand. The correct solution to accomplish what you want is to use a "carousel" plugin. (Many, many different people have created plugins like this. You can simply google for it.)
If you are using Wordpress, then you should search for a Wordpress plugin.
If you simply want a plug-and-play solution that will work with any website, Slick is the best carousel plugin that I know of, and it works great with jQuery.

Using jQuery you can achieve that.
jQuery library is required
clicked = 1;
divSW = document.getElementByClassName('parentdiv').scrollWidth;
$('button#nxtBtn').click(function(){
divSL = $('div.parentdiv').scrollLeft();
if(divSW > divSL){
clicked++;
divW = $('div.parentdiv').width();
moveW = divW * clicked;
$('div.parentdiv').animate({
scrollLeft : moveW
})
}
})
But you need to add a next button in your HTML code with an id attribute of nxtBtn
<button id="nxtBtn">next</button>
If you need to see the previous buttons in the div you will add another button to your HTML code with an id of prvBtn.
<button id="prvBtn">previous</button>
Then you also add this code below
$('button#prvBtn').click(function(){
divSL = $('div.parentdiv').scrollLeft();
if(divSL > 0){
clicked--;
divW = $('div.parentdiv').width();
moveW = divW * clicked;
$('div.parentdiv').animate({
scrollLeft : moveW
})
}
})

$("#after").on("click", function() {
for (var i = 0; i < 3; i++)
$(".childdiv:not(.show)").eq(0).addClass("show");
});
#after {
background: lightgrey;
display: block;
width: 250px;
text-align: center;
padding: 2px 0;
cursor: pointer;
border-radius: 5px;
margin-top: 5px;
}
#after:hover {
text-decoration: underline;
}
.childdiv {
display: none;
}
.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parentdiv">
<div class="childdiv show">
<span> Text1
<button>button1 </button>
</span>
</div>
<div class="childdiv show">
<span> Text2 lorem ipsum
<button>button2 </button>
</span>
</div>
<div class="childdiv show">
<span> Text3 lorem ipsum
<button>button3 </button>
</span>
</div>
<div class="childdiv">
<span> Text4 lorem ipsum
<button>button4 </button>
</span>
</div>
<div class="childdiv">
<span> Text5 lorem ipsum
<button>button5 </button>
</span>
</div>
<div class="childdiv">
<span> Text6 lorem ipsum
<button>button6 </button>
</span>
</div>
<a id="after">after \/</a>
</div>

Related

Manipulate content # for all div elements (with role="tabpanel") - style="display: none;" to display: block;

How to manipulate a website to change all
div elements (with role="tabpanel") - style="display: none;" to style="display: block;"
via class="accordionItemContent" could be possible as well
I would like to see the whole page/div elements with total content (so it doesn't matter is the manipulation is via JS or CSS .. or jquery)
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;"></div>
Because the page is behind a login probably a change via site inspect/console would be one way to go.
Update
I have been to fast when writing about "display"
if "block" it only shows a frame without content
I saw that there is another main difference in the element shown vs all other hidden once:
<h1 class="uiaccordion" role="tab" a-exp="false" a-sel="false" tabindex="-1"><a href="#" id="manage_content_11_ac" tabindex="-1"></div>
<h1 class="uiaccordion" role="tab" a-exp="true" a-sel="true" tabindex="0"> <a href="#" id="manage_content_12_ac" tabindex="-1"></div>
-> How to see/activate the content as well?
jQuery...
$("div[role='tabpanel']").show();
or...
$('.accordionItemContent').show();
Run this in console
document.querySelectorAll('div.accordionItemContent.accordion.ui-reset.widget.uibottom[role="tabpanel"]').forEach(e => {
e.style.display = "block";
});
Edited for edited question, only using class accordionItemContent
document.querySelectorAll('div.accordionItemContent[role="tabpanel"]').forEach(e => {
e.style.display = "block";
});
To change the other attributes as mentioned in the update:
document.querySelectorAll('div.accordionItemContent[role="tabpanel"]').forEach(e => {
e.style.display = "block";
e.setAttribute(“tabindex”, 0) // Use this syntax to change all effected attributes
});
One approach could be creating a generic CSS class to hide elements and add/remove it to the element(s) you want to hide/show:
function showDivs() {
document.querySelectorAll('[role=tabpanel]').forEach(elem => elem.classList.remove('hide'));
}
.hide {
display: none;
}
<button onclick="showDivs()">show hidden DIVs</button>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV1: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV2: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom hide" role="tabpanel">DIV3: Lorem ipsum dolor sit consecutor amet</div>
If you prefer to stick with inline CSS, instead, you can modify the code above in this way:
function showDivs() {
document.querySelectorAll('[role=tabpanel]').forEach(elem => {
elem.style.display = 'block';
/*
* NOTE: if the inline style contains only the display property,
* you could even entirely remove it:
*
* elem.removeAttribute('style');
*/
});
}
<button onclick="showDivs()">show hidden DIVs</button>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV1: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV2: Lorem ipsum dolor sit consecutor amet</div>
<div class="accordionItemContent accordion ui-reset widget uibottom" role="tabpanel" style="display: none;">DIV3: Lorem ipsum dolor sit consecutor amet</div>

Multiple show and hide buttons

I want my show more and hide button to work for multiple text contents, now it's only working for one of them. I have 12 different texts that I want to be able to show and hide with 12 different buttons, like the one in my code. How do I do this?
var content = document.getElementById("content");
var button = document.getElementById("show-more");
button.onclick = function() {
if (content.className == "open") {
//shrink the box
content.className = "";
button.innerHTML = "Läs mer";
} else {
//expand the box
content.className = "open";
button.innerHTML = "Dölj";
}
};
<div id="content">
Test
</div>
<a id="show-more">Läs mer</a>
Hej Linnéa!
IDs should be unique, and if you want multiple occurrences of something, you should use class names.
What I would do is to wrap the links inside of the container divs;
<div class="content">
Content
<a class="toggle" href="#">Läs mer</a>
</div>
<div class="content">
Content
<a class="toggle" href="#">Läs mer</a>
</div>
Then, instead of attaching your event listener to each anchor element, take advantage of event propagation, and add a listener to each content wrapper instead;
document.querySelectorAll('.content').forEach(function(contentDiv) {
contentDiv.onclick = function(e) {
if(e.target.classList.contains('toggle')) {
e.target.innerHTML = e.currentTarget.classList.contains('open') ? 'Dölj' : 'Läs mer';
e.currentTarget.classList.toggle('open');
}
}
});
It is better to use class than id. I have implemented simple snippet where you can design using just class names.
var content = document.getElementById("content");
$(".showHide").on("click", function() {
$(this).parent().find(".more").toggle();
if ($(this).parent().find(".more").is(":visible")) {
$(this).text("Show less");
} else {
$(this).text("Show more");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="content">
<div class="text">
First text1
<div style="display:none;" class="more">Other text 1</div>
<a class="showHide" href="#">Show more</a>
</div>
<hr />
<div class="text">
First text2
<div style="display:none;" class="more">Other text 2</div>
<a class="showHide" href="#">Show more</a>
</div>
</div>
Use document querySelectorAll
var content = Array.from(document.querySelectorAll(".container"));
content.forEach(function(el){
//var content= el.querySelector(".content");
var button = el.querySelector(".show-more");
button.addEventListener("click", function () {
el.classList.toggle("open");
el.classList.contains("open") ? (button.innerHTML = "Dölj") : (button.innerHTML = "Läs mer");
}, false)
});
.container .content{display: none}
.container.open .content{display: block}
<section>
<article class="container">
<p>Lorem Ipsum is simply dummy</p>
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="show-more">Läs mer</a>
</article>
<article class="container">
<p>Lorem Ipsum is simply dummy</p>
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="show-more">Läs mer</a>
</article>
<article class="container">
<p>Lorem Ipsum is simply dummy</p>
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="show-more">Läs mer</a>
</article>
<article class="container">
<p>Lorem Ipsum is simply dummy</p>
<p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a class="show-more">Läs mer</a>
</article>
</section>
You can make it work for multiple paragraphs if you use classes for all elements, and then process it from there as element pairs (div + corresponding button).
I deliberately kept everything as much as possible the same as your original code, so it would be easy to understand the changes. And I added some 'hidden' content so you really see something happening.
var contentDivs = document.getElementsByClassName("content");
var buttons = document.getElementsByClassName("show-more");
for (var i = 0; i < contentDivs.length; i++) {
// "let" creates locally scoped variables for use in the function.
let div = contentDivs[i];
let button = buttons[i];
button.onclick = function() {
if (div.className == "open") {
//shrink the box
div.className = "content";
button.innerHTML = "Read more";
} else {
//expand the box
div.className = "open";
button.innerHTML = "Close";
}
};
}
div, a { font-size: 14px; }
.content { overflow: hidden; max-height: 18px }
<div class="content">
Div 1<br />.....<br />.....<br />.....
</div>
<a class="show-more">Read more</a>
<hr size="1">
<div class="content">
Div 2<br />.....<br />.....<br />.....
</div>
<a class="show-more">Read more</a>
<hr size="1">

Need to toggle only the specific paragraph

I am trying to toggle the specific paragraph only but not both at the same time.
.popuplink is the same class for both the ul in the html code.
IDs are dynamically generated and it starts from 0 (in the end).
Example: If I click the id promo_popup_cta_0 then promo_popup_wrapper_0 should toggle.
When this id promo_popup_cta_0 is with 0 in the end then this id will be promo_popup_wrapper_0 is with 0 in the end. Below won't work if there are 100 of div with different numbers. I don't want to write separate code for separate clicks.
$("#promo_popup_cta_0").on("click", function() {
$("#promo_popup_wrapper_0").slideToggle();
});
$(".popupLink").on("click", function() {
$(".popupContentWrapper").slideToggle();
});
$(".popupCloseBtn").on("click", function() {
$(".popupContentWrapper").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header-top-info">
<div class="promo-row">
<p>
FREE SHIPPING ON U.S. ORDERS OF $100 +
<u class="popupLink" id="promo_popup_cta_0">Details</u>
</p>
<p></p>
<div class="popupContentWrapper" id="promo_popup_wrapper_0">
<div class="text-right">
<div class="popupCloseBtn">Close X</div>
</div>
<div class="popupContent">
<p>Nothing says thank you, and I love you, quite like snacks, especially when they come packaged in a FEED 10 Bag. Curated with our friends at Mouth, this bundle features a delightful mix of salty and sweet</p>
</div>
</div>
</div>
<div class="promo-row">
<p>
Navy blue bag day <u class="popupLink" id="promo_popup_cta_1">For More</u>
</p>
<p></p>
<div class="popupContentWrapper" id="promo_popup_wrapper_1">
<div class="text-right">
<div class="popupCloseBtn">Close X</div>
</div>
<div class="popupContent">
<p style="margin: 0px 0px 15px; padding: 0px; text-align: justify;"><strong style="margin: 0px; padding: 0px;">Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type </p>
</div>
</div>
</div>
</div>
You need to use this to refer to the element being clicked on, otherwise (as you discovered) you will refer to all matching elements. Use .closest() to traverse up the DOM and when needed, .find() to traverse down:
$(".popupLink").on("click", function() {
$(this).closest('.promo-row').find(".popupContentWrapper").slideToggle();
});
$(".popupCloseBtn").on("click", function() {
$(this).closest(".popupContentWrapper").slideToggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="header-top-info">
<div class="promo-row">
<p>
FREE SHIPPING ON U.S. ORDERS OF $100 +
<u class="popupLink" id="promo_popup_cta_0">Details</u>
</p>
<p></p>
<div class="popupContentWrapper" id="promo_popup_wrapper_0">
<div class="text-right">
<div class="popupCloseBtn">Close X</div>
</div>
<div class="popupContent">
<p>Nothing says thank you, and I love you, quite like snacks, especially when they come packaged in a FEED 10 Bag. Curated with our friends at Mouth, this bundle features a delightful mix of salty and sweet</p>
</div>
</div>
</div>
<div class="promo-row">
<p>
Navy blue bag day <u class="popupLink" id="promo_popup_cta_1">For More</u>
</p>
<p></p>
<div class="popupContentWrapper" id="promo_popup_wrapper_1">
<div class="text-right">
<div class="popupCloseBtn">Close X</div>
</div>
<div class="popupContent">
<p style="margin: 0px 0px 15px; padding: 0px; text-align: justify;"><strong style="margin: 0px; padding: 0px;">Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type </p>
</div>
</div>
</div>
</div>
If you stay consistent and the Id's are all the same besides for the number at the end you can take the number after the last _ and use it like this
$(".popupLink").on("click", function(e) {
var id = e.target.id;
var n = id.lastIndexOf('_');
var result = id.substring(n + 1);
$("#promo_popup_wrapper_" + result).slideToggle();
});
Hope this helps

Click to hide each div and show another div in jquery

I am new to jQuery. Trying to hide the first div and show second div. When I again click on 2nd div, it will show me the first div.
Here is my code.
$(".c1").on('click', function() {
$(".one").fadeIn();
$(".two").fadeOut();
});
$(".c2").on('click', function() {
$(".two").fadeIn();
$(".one").fadeOut();
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 Click to see div 2</h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 Click to see div 1</h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
You have your fadeOut and fadeIn calls inverted.
You need to prevent the a link behavior.
Pass as callback your fadeIn call.
Look at this code snippet with those fixes
I've added a hide class to show how the DIVs appear and disappear.
$(".c1").on('click', function(e) {
e.preventDefault();
$(".one").fadeOut(function() {
$(".two").fadeIn();
});
});
$(".c2").on('click', function(e) {
e.preventDefault();
$(".two").fadeOut(function() {
$(".one").fadeIn();
});
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
.hide {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 Click to see div 2</h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two hide">
<div class="ab-head ">
<h1>This is div 2 Click to see div 1</h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
See? now is working your logic!
First, it will work better if you use spans instead of links
The nyou have the order of fadein/fadeout confused:
$(".c1").on('click', function() {
$(".two").fadeIn();
$(".one").fadeOut();
});
$(".c2").on('click', function() {
$(".one").fadeIn();
$(".two").fadeOut();
});
.right {
font-size: 20px;
float: right;
margin-right: 50px;
}
.ab-container {
margin-bottom: 50px;
}
.container {
padding: 30px 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 <span class="right c1"> Click to see div 2</span></h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 <span class="right c2"> Click to see div 1</span></h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>
Your code is working you only need to remove the href="" from your <a> tag. However, here is my way of doing it if you like to take a look. And the edited version of the HTML
$('.c1').click(function () {
$('.one').fadeIn();
$('.two').fadeOut();
})
$('.c2').click(function () {
$('.two').fadeIn();
$('.one').fadeOut();
})
<div class="container">
<div class="ab-container one">
<div class="ab-head">
<h1>This is div 1 <a class="right c1"> Click to see div 2</a></h1>
</div>
<div class="ab-content">
<p>In publishing and graphic design, lorem ipsum is a filler text or greeking commonly used to demonstrate </p>
</div>
</div>
<div class="ab-container two">
<div class="ab-head ">
<h1>This is div 2 <a class="right c2"> Click to see div 1</a></h1>
</div>
<div class="ab-content">
<p>Replacing meaningful content with placeholder text allows designers to design the form of the content before the content itself has been produced.</p>
</div>
</div>
</div>

Jquery how to find element from outside

I would like to find an element which is outside from element which I'm trying click.
I need to click #form-1 and slideToggle .business-form-kaufen.
You can look hierarchy in the picture.
Thanks for help!
You need to go up two DIV levels from the button, then go to the next DIV, and find .business-form-kaufen in there.
$(".button").click(function() {
$(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});
Use .parent() relatively
$("#form-1").on("click", function(evt) {
$(this).parent().parent().next().find(".business-form-kaufen").slideToggle();
});
.business-form-kaufen {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
<div id="kaufen-form-submit">
<a id="form-1">Unverbindliches ...</a>
</div>
</div>
<div id="wpcf7-fp09-p448-ol">
<div class="screen-reader-response"></div>
<form>
<div class="business-form-kaufen">
Lorem ipsum dolor sit amet
</div>
</form>
</div>
Or if you can either edit your html to add some id to the .business-form-kaufen or be sure that it is only this single element of this class, you can do it much simpler:
$("#form-1").on("click", function(evt) {
$(".business-form-kaufen").slideToggle();
// $("#business-form-kaufen").slideToggle() uncomment if you can setup unique id on this element
});
.business-form-kaufen {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12 text-left">
<div id="kaufen-form-submit">
<a id="form-1">Unverbindliches ...</a>
</div>
</div>
<div id="wpcf7-fp09-p448-ol">
<div class="screen-reader-response"></div>
<form>
<div class="business-form-kaufen">
Lorem ipsum dolor sit amet
</div>
</form>
</div>
I assume form and business-form-kaufen are 1 to 1 relationship? I'd put them together in a container and use parents() to find the container and then find() to look for the business-form-kaufen.
This way, the code is smart enough to look for the business-form-kaufen without the need to hard code the DOM structure.

Categories