have been scratching my head over this for the past few days, basically the functionality I am going for is that I have a <ul> with 7 <li> elements and then I have another section with 7 <p> elements. What I am looking for is that when I hover on one of the <li> elements it puts the text from the corresponding <p> element. The thing is that I cannot play directly with the text or inject via jQuery, because the content in the <p> are references to yaml files. I have hidden all the elements except the first one which should appear on pageload, and then I guess there is a way of hiding the <p>'s and showing only the corresponding one. Thanks in advance! please find attached the code snippet:
<section class="container clearfix">
<div class="text-center">
<ul class="solutions-items">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</section>
<section class="container clearfix">
<div class="text-center solutions-text-p">
<p class="">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<p class="hidden">{% yaml reference %}</p>
<button class="solutions-learnmore-btn">{% yaml reference %}</button>
</div>
</section>
If you mean you want to show the corresponding p when hovering an li, you can do it by index, or by associating them with a data-* attribute.
Here's an example by index:
We hook mouseenter on the list, delegated so that we only receive the event when it relates to one of the lis
When we get the event, we get the index of that li relative to its siblings
Then we grab the paragraphs in the solutions-text-p div, make sure they all have the hidden class, then remove it from the one with the same index as the li
Live Copy - I've made the jQuery part fairly verbose for clarity:
$(".solutions-items").on("mouseenter", "li", function() {
var index = $(this).index();
var paras = $(".solutions-text-p p");
paras.addClass("hidden");
paras.eq(index).removeClass("hidden");
});
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container clearfix">
<div class="text-center">
<ul class="solutions-items">
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Fourth</li>
<li>Fifth</li>
<li>Sixth</li>
<li>Seventh</li>
</ul>
</div>
</section>
<section class="container clearfix">
<div class="text-center solutions-text-p">
<p class="">First</p>
<p class="hidden">Second</p>
<p class="hidden">Third</p>
<p class="hidden">Fourth</p>
<p class="hidden">Fifth</p>
<p class="hidden">Sixth</p>
<p class="hidden">Seventh</p>
<button class="solutions-learnmore-btn">{% yaml reference %}</button>
</div>
</section>
Here's a less verbose version of the jQuery:
$(".solutions-items").on("mouseenter", "li", function() {
$(".solutions-text-p p")
.addClass("hidden")
.eq($(this).index())
.removeClass("hidden");
});
You can use the mouse enter event and index of the hovered element to show/hide the target elements
var $ps = $('.solutions-text-p p')
$('.solutions-items li').mouseenter(function() {
var $cur = $ps.eq($(this).index()).show();
$ps.not($cur).hide();
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container clearfix">
<div class="text-center">
<ul class="solutions-items">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</section>
<section class="container clearfix">
<div class="text-center solutions-text-p">
<p class="">1</p>
<p class="hidden">2</p>
<p class="hidden">3</p>
<p class="hidden">4</p>
<p class="hidden">5</p>
<p class="hidden">6</p>
<p class="hidden">7</p>
<button class="solutions-learnmore-btn">{% yaml reference %}</button>
</div>
</section>
$('.solutions-items li').mouseenter(function() {
$("#show_data").text($(this).data("text"));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section class="container clearfix">
<div class="text-center">
<ul class="solutions-items">
<li data-text="bla_1">1</li>
<li data-text="bla_2">2</li>
<li data-text="bla_3">3</li>
<li data-text="bla_4">4</li>
<li data-text="bla_5">5</li>
<li data-text="bla_6">6</li>
<li data-text="bla_7">7</li>
</ul>
</div>
</section>
<section class="container clearfix">
<div class="text-center solutions-text-p">
<p id="show_data"></p>
<button class="solutions-learnmore-btn">{% yaml reference %}</button>
</div>
</section>
Related
I want from among the boxes that I put in the code below; Select a box whose z-index is equal to 3 and make its background red to distinguish it from other boxes.
html:
<ul>
<li class="post1">
<div class="content">
<h4 class="title">title post1</h4>
</div>
</li>
<li class="post2">
<div class="content">
<h4 class="title">title post2</h4>
</div>
</li>
<li class="post3">
<div class="content">
<h4 class="title">title post3</h4>
</div>
</li>
<li class="post4">
<div class="content">
<h4 class="title">title post4</h4>
</div>
</li>
<li class="post5">
<div class="content">
<h4 class="title">title post5</h4>
</div>
</li>
</ul>
For this purpose I wrote a script code that does not work. Please edit this code for me:
script:
$("li").each(function(){
var a=$(this).find("li");
$(this).css('z-index',3);
a.style.background= "red";
});
This should work
$("li").each(function(index){//goes througth li elements
if($(this).css("z-index") == 3){//if zindex equals 3
$(this).css("background-color","red");//set back ground to red
}
});
I need one help with the code, I have two HTML div blocks with the same class name and there is one extra h2 tag with different class present in one div block. I want to hide if h2 class name is not present in that div and show if the h2 class name is present. Please find the below mentioned code that I have created.
-- First block Div --
<div class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display</p>
</div>
</div>
-- Second block Div --
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="single-section">
<p>Content to Display</p>
</div>
</div>
-- jQuery Code --
$(document).ready(function () {
if ($(".course-content").find(".accesshide")) {
$(".course-content").find(".topics").show();
} else if ($(".course-content").find(".single-section")) {
$(".course-content").find(".topics").hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display (this statement is inaccurate)</p>
</div>
</div>
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display (this statement is inaccurate)</li>
</ul>
<div class="single-section">
<p>Content to Display</p>
</div>
</div>
Since the controls are independent events, they should be evaluated separately. Therefore, two separate if blocks should be used. In the second event in the solution below, the first child element of the parent element of the selected element is hidden by selecting it.
$(document).ready(function () {
if ($(".course-content").find(".accesshide")) {
$(".course-content > .accesshide").find(".topics").show();
}
// Because both <div> elements have the ".topics" class style applied, the ".single-section"
// element is selected and the first child element of the parent element is hidden.
if ($(".course-content").find(".single-section")) {
$(".course-content > .single-section").parent().children(':first-child').hide();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display</p>
</div>
</div>
<hr>
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="single-section">
<p>Content to Display</p>
</div>
</div>
This is trivial using a CSS child selector (>). Just find the collection of elements that are an accesshide child of a course-content and hide the topics child of their parents.
You could do something similar with a descendant selector ( ), but since you know it's a child for this case, the child selector is perhaps more accurate.
MDN's Child Combinator docs.
$(document).ready(function () {
$('.course-content>.accesshide').parent().find('.topics').hide();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>Content to Display</p>
</div>
</div>
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display (this should actually be shown - there's no h2 in the parent div)</li>
</ul>
<div class="single-section">
<p>Content to Display</p>
</div>
</div>
I want to hide if h2 class name is not present in that div and show if the h2 class name is present.
You don't need any JS code, just only CSS with adjacent or general sibling combinator. For example:
.course-content .topics {
display: none;
}
.course-content .accesshide + .topics {
display: block;
}
When you have to use jQuery then you can use the same logic and the .next() method (or .nextAll()):
$(".course-content").find(".topics").hide();
$(".course-content").find(".accesshide").next(".topics").show();
If the controlled block can be both before and after the control block, the shortest way is to use the .siblings() method. If you need to show the .topics block if there is an .accesshide block or a .single-section block nearby, you can use this jQuery method for both cases:
$(document).ready(function () {
$(".course-content").find(".topics").hide();
$(".course-content").find(".accesshide, .single-section").siblings(".topics").show();
});
<div class="course-content">
<ul class="topics">
<li class="data-list">Content not to Display</li>
</ul>
<div class="row">
<p>There are no special blocks nearby</p>
</div>
</div>
<div class="course-content">
<h2 class="accesshide"></h2>
<ul class="topics">
<li class="data-list">Show because of the .accesshide block</li>
</ul>
<div class="row">
<p>Case 1</p>
</div>
</div>
<div class="course-content">
<ul class="topics">
<li class="data-list">Show because of the .single-section block</li>
</ul>
<div class="single-section">
<p>Case 2</p>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Using jQuery I want to get the text of the paragraph class .card__text in the div name="name" (ie. Rotten one);
<li id="d318" class="cards__item long">
<div class="card long">
<div name="nick" class="card__content long cell0">
<p class="card__text">Johnny one</p>
</div>
<div name="name" class="card__content long cell1">
<p class="card__text">Rotten one</p>
</div>
<div name="descr" class="card__content long cell2">
<p class="card__text">One. This was a story of Johnny Rotten</p>
</div>
</div>
</li>
I tried:
$("li#d318").first('.name').text();
$("li#d318").closest('.card__text').text();
You can select the element directly using #d318 .card__content.cell1. Also note that div elements do not have a name attribute so your HTML is invalid. Those attributes should be removed. Try this:
let text = $('#d318 .card__content.cell1').text().trim();
console.log(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="d318" class="cards__item long">
<div class="card long">
<div class="card__content long cell0">
<p class="card__text">Johnny one</p>
</div>
<div class="card__content long cell1">
<p class="card__text">Rotten one</p>
</div>
<div class="card__content long cell2">
<p class="card__text">One. This was a story of Johnny Rotten</p>
</div>
</div>
</li>
</ul>
Thanks, but assuming I did not have those classes (cell0, cell1, cell2...), how would I go about it?
In that case you could use :nth-child like this:
let text = $('#d318 .card__content:nth-child(2)').text().trim();
console.log(text);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li id="d318" class="cards__item long">
<div class="card long">
<div class="card__content long cell0">
<p class="card__text">Johnny one</p>
</div>
<div class="card__content long cell1">
<p class="card__text">Rotten one</p>
</div>
<div class="card__content long cell2">
<p class="card__text">One. This was a story of Johnny Rotten</p>
</div>
</div>
</li>
</ul>
Instead of using the 'name' attribute to create a unique div, I would change the 'cell0', 'cell1', and 'cell2' from being class names to ids of the div since they don't seem to be reused and thus can be a unique identifier for each div. Here is an example of what I mean...
let text = $('#d318 #cell1 .card__text').text().trim()
console.log(text)
//or
$('#output').text(text);
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<li id="d318" class="cards__item long">
<div class="card long">
<div id="cell0" class="card__content long">
<p class="card__text">Johnny one</p>
</div>
<div id="cell1" class="card__content long">
<p class="card__text">Rotten one</p>
</div>
<div id="cell2" class="card__content long">
<p class="card__text">One. This was a story of Johnny Rotten</p>
</div>
</div>
</li>
<div> Results: <span id='output'></span></div>
</body>
</html>
I have a JavaScript toggle so T need to tried to collapse all sections on load by default - by inserting
ul.section-content{
display:none;
}
and it is working. But when I tried to hide first-child or not first-child it is not working.
.cscr .csec .section ul:first-of-type {
display: none;
}
<div class="cscr">
<ul class="csec">
<li class="section">
<div class="section-header">
<div class="section-left">
<h5>section01</h5>
<p>hello1</p>
</div>
<div class="section-meta">
</div>
</div>
<ul class="section-content">
<li class="course-item">
<h1>lesson01</h1>
</li>
</ul>
</li>
<li class="section">
<div class="section-header">
<div class="section-left">
<h5>section02</h5>
<p>hello1</p>
</div>
<div class="section-meta">
</div>
</div>
<ul class="section-content"> /* to hide this */
<li class="course-item">
<h1>lesson02</h1>
</li>
</ul> /* to hide this */
</li>
</ul>
</div>
second case:
and how to display only first and not others with help of not-first-child
screenshot of what is needed
Do you want something like this? https://codepen.io/anon/pen/YOOXOv. Change the CSS properties to whatever you want.
Here you are selecting all sections except the first one and then selecting ul inside them.
In my WordPress based website a plugin automatically wraps every element in the post content with <ul></ul>. That wraps everything even the <div>s which is invalid.
I want to unwrap certain elements and tried jQuery .unwrap . But I am able to unwrap some elements except a few div elements.
Here is the code:
<div class="post-content">
<p>Example post content</p>
<ul class="plugin_class">
<li>test</li>
<li>test</li>
<ul>
<div class="button-main-wrap">
<span class="button-abc">
<span>
Website link
</span>
</span>
<span class="button-abc"></span>
<span class="button-abc"></span>
</div>
</ul>
<ul>
<div class="number">hundred</div>
<div class="number">thosand</div>
</ul>
</ul>
<div>
<div>This content is okay</div>
<div>This content is okay</div>
</div>
</div>
From the above code, I want to separate <div class="button-main-wrap"> from <ul class="plugin_class"> or stop the <ul class="plugin_class"> to wrap elements which doesn't belong to it. ex: the div <div class="button-main-wrap"> or other elements like <div class="number">.
I tried these:
jQuery("ul").find('.button-main-wrap').unwrap();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-content">
<p>Example post content</p>
<ul class="plugin_class">
<li>test</li>
<li>test</li>
<ul>
<div class="button-main-wrap">
<span class="button-abc">
<span>
Website link
</span>
</span>
<span class="button-abc"></span>
<span class="button-abc"></span>
</div>
</ul>
<ul>
<div class="number">hundred</div>
<div class="number">thosand</div>
</ul>
</ul>
<div>
<div>This content is okay</div>
<div>This content is okay</div>
</div>
</div>
This unwraps all the <ul> elements in .post-content which I don't want.
jQuery(".plugin_class").find('.button-main-wrap').unwrap();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="post-content">
<p>Example post content</p>
<ul class="plugin_class">
<li>test</li>
<li>test</li>
<ul>
<div class="button-main-wrap">
<span class="button-abc">
<span>
Website link
</span>
</span>
<span class="button-abc"></span>
<span class="button-abc"></span>
</div>
</ul>
<ul>
<div class="number">hundred</div>
<div class="number">thosand</div>
</ul>
</ul>
<div>
<div>This content is okay</div>
<div>This content is okay</div>
</div>
</div>
This doesn't do anything.
I put all the code together in this Fiddle.
How to separate the div and stop the to wrap elements un-necessarily?
It is because div is not a valid child of ul, so wrap the contents of the ul with li then unwrap the li elements so that the parent ul will get removed
$('.plugin_class > ul').each(function(){
$(this).wrapInner('<li />').contents().unwrap()
})
Demo: Before, After