I have multiple rows
<div class="row" id="move-data-row0"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
I want only the first three to be shown and on a button click 3 more should appear.
My first thoughts were to give every div the same classname with an index but I do not know how the JavaScript should be implemented.
I started by trying to hide one div, but that doesn't really work
$("#move-data-row0").children().prop('disabled',true);
You can use this minimal example, or improve it to get what you really want:
HTML:
<div class="row">1</div>
<div class="row">2</div>
<div class="row">3</div>
<div class="row">4</div>
<div class="row">5</div>
<div class="row">6</div>
<div class="row">7</div>
<button>More</button>
JavaScript:
$(document).ready(function(){
$('.row:gt(2)').hide();
$('button').click(function(){
$('.row:hidden:lt(3)').show();
});
});
FIDDLE: https://jsfiddle.net/lmgonzalves/e0ppjwnm/
Related
I would like to hide an element on a specific page by using Javascript, Jquery, or CSS. I have really limited options on how to do it because I'm using a very strict eshop solution. I can add Jquery or Javascript but it will be inserted into every single page on my eshop. I don't want to overload my website so the first condition has to be something like "if body class is .view-commodity-detail" (which is a page for every product detail) do something.
The second condition I need is to hide div with class .detaillist-row but only that one where the text Luggage Volume is located. (I need to hide .detaillist-row-value of this div parameter also - such as 50-59L, 60-69L etc..)
My code on eshop product page looks like this
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
I was thinking about using something like this, but it would hide all my detaillist-row and I want to hide only that one where the Luggage Volume is.
if ($("body").hasClass(".view-commodity-detail")) {
if ($('.detaillist-row > .detaillist-row-name:contains("Luggage volume")').length > 0) {
$(".detaillist-row").hide();
}
}
I hope it makes any sense.
Thank you guys for your help!
You can do this using data-value but you need to add data-value to that element which you want to hide.
like this:
<div class="detaillist-row-name" data-value="Luggage Volume">Luggage Volume</div>
div[data-value="Luggage Volume"] {
display: none;
}
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name" data-value="Luggage Volume">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
or you can use javascript
<body class=".view-commodity-detail">
<div class="vc-commoditydetail_parameters">
<div class="detaillist-row">
<div class="detaillist-row-name" id="detaillist-row-name">Luggage Volume</div>
<div class="detaillist-row-value"><span>50-59l</span></div>
<div class="detaillist-row-value"><span>60-69l</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Weight</div>
<div class="detaillist-row-value"><span>2500 G</span></div>
</div>
<div class="detaillist-row">
<div class="detaillist-row-name">Size</div>
<div class="detaillist-row-value"><span>56 x 34 x 36 CM</span></div>
</div>
</div>
</body>
<script>
var str = document.getElementById("detaillist-row-name").innerHTML;
var n = str.replace("Luggage Volume", "");
document.getElementById("detaillist-row-name").innerHTML = n;
</script>
I need to make a button that views three consequent posts
when I click "view all" the three "div"s should show up
I need to make the three 'div's show up if I click the view all button
so I am using jquery here
$('.posts .repeat-grid').slice(0, 3).show();
$('#view-all').on('click', function() {
$('.posts .repeat-grid:hidden').slice(0, 1).slideDown();
if ($('.posts .repeat-grid:hidden').length === 0) {
$('#view-all').fadeOut();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posts">
<div class="repeat-grid">1</div>
<div class="repeat-grid">2</div>
<div class="repeat-grid">3</div>
</div>
<div id="view-all">View All</div>
any idea why it is not working?
You Can Try this if that's what you mean
$('#view-all').on('click', function() {
$('.posts').slideToggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="posts">
<div class="repeat-grid">1</div>
<div class="repeat-grid">2</div>
<div class="repeat-grid">3</div>
</div>
<div id="view-all">View All</div>
I have searched in several similar threads, but I do something wrong and it seems to not work.
I have this HTML structure:
<div id="form" class="inquiry-section">
<div class="inner">
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-straight-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-gshape-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-pshape-ab">some content</div>
</div>
</div>
<div class="inner-form-col">
<div class="inner-form"><input type="radio"><span>some label</span></div>
<div class="inner-ab">
<div class="inner-isle-ab">some content</div>
</div>
</div>
</div>
</div>
What I want to achieve is after clicking an input in .inner-form to .slideDown() the .inner-ab in the same .inner-form-col and to .slideUp() all the .inner-ab in the other columns. I made it work with .show() / .hide() or switching a class but as I need height: auto, I cannot achieve animation AND re-flowing the content below.
Have You try jQuery Easing Plugin
http://gsgd.co.uk/sandbox/jquery/easing/
I somehow managed to make it work by using this, but I'm not 100% sure why it does:
$('.inner-form-col').each(function() {
var $dropdown = $(this);
$(".inner-form input", $dropdown).click(function(e) {
$div = $(".inner-ab", $dropdown);
$div.slideDown();
$(".inner-ab").not($div).slideUp();
});
});
How would I use jQuery to get get the text from the rating selected div within the id=overall answer div?
I want to dynamically fetch the text "TESTING" from that div within the overall parent div.
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING</div>
</div>
I tried to do this and it is blank.
$(document.getElementById('overall')).find('.rating selected').text();
Your code would work but your selector is wrong. It would be...
$(document.getElementById('overall')).find('.rating.selected').text();
Notice the dot and no space between rating and selected.
However, I think you are over complicating things...
$('#overall .selected').text();
Example...
alert($('#overall .selected').text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class='answer' id="overall">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating'>4</div>
<div class='rating selected'>TESTING - selected</div>
</div>
<div class='answer' id="effort">
<div class='rating'>1</div>
<div class='rating'>2</div>
<div class='rating'>3</div>
<div class='rating selected'>4</div>
<div class='rating'>TESTING - not selected</div>
</div>
$('#overall .rating.selected').html()
Show a new div on click
<div id="box1">abc</div>
<div id="box2" style="display:none;">awklnnbc</div>
<div id="box3" style="display:none;">wgweilwe</div>
<div id="box4" style="display:none;">vwfweifu</div>
<div id="box5" style="display:none;">xvwervwe</div>
<div id="box6" style="display:none;">gwevw</div>
<button>Show Another Div</button>
after clicking on show another div
<div id="box1">abc</div>
<div id="box2" style="display:none;">awklnnbc</div>
<div id="box3" style="display:none;">wgweilwe</div>
<div id="box4" style="display:none;">vwfweifu</div>
<div id="box5" style="display:none;">xvwervwe</div>
<div id="box6" style="display:none;">gwevw</div>
<button>Show Another Div</button>
a new div will be appearing on every click.
hope you understand now.
Only box1 will be visible first. rest of them hidden. different content on different div.
If you someone click on show another div, a new div will be showing.
is it possible?
This has a good answer for your problem I believe: http://csscreator.com/node/708
If you want do dynamically add a new div you should just try appending it to the content:
The HTML:
<div class="container">
<div id="content">
</div>
<button id="showNewDiv">SHOW ANOTHER DIV</button>
</div>
The Javascript (assuming you are using jQuery)
$("#showNewDiv").on("click", function(e){
$("#content").append("<div/>", {text: "whatever"});
});