I have a section on my website, with Q/A blocks. If we click on question title (h3), it must appear answer hidden under the question.
So on the right side of question title, we have arrow down, and arrow up. As you might understand, it must be appeared arrow down when question is "closed", and arrow up when question is "open".
$("img.up").hide();
$(".question h3").click(function(){
var b = $(this);
var a = b.parent(".question").children(".answer");
a.slideToggle();
if(a.css('display') == 'block'){
b.children("img.down").hide();
b.children("img.up").show()
} else {
b.children("img.up").hide();
b.children("img.down").show()
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<h3>
А я могу ездить на Mercedes S-Class без прав?
<img src="img/icons/down.png" alt="" class="down">
<img src="img/icons/up.png" alt="" class="up">
</h3>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aspernatur, consectetur amet mollitia quasi sint provident, totam ad facere quia cumque magnam quisquam culpa praesentium aperiam qui voluptatem maxime corporis.
</div>
</div>
Code works on first click, and ignores all next clicks. Else is not working. I know that it is easy but... Sometimes you can't do such a simple things
Try storing the state of .answer elements css display attribute, before calling the .slideToggle() method and use this stored state to hide/display your arrow images:
$("img.up").hide();
$(".question h3").click(function(){
var b = $(this);
var a = b.parent(".question").children(".answer");
// Store isVisible state for answer element before ..
var isVisible = a.css('display') == 'block';
// ..you call slideToggle()
a.slideToggle();
if(isVisible){
b.children("img.down").hide();
b.children("img.up").show()
} else {
b.children("img.up").hide();
b.children("img.down").show()
};
});
img {
width:1rem;
height:1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="question">
<h3>
А я могу ездить на Mercedes S-Class без прав?
<img src="https://openclipart.org/image/2400px/svg_to_png/154963/1313159889.png" alt="" class="down">
<img src="https://openclipart.org/image/2400px/svg_to_png/154969/1313159942.png" alt="" class="up">
</h3>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aspernatur, consectetur amet mollitia quasi sint provident, totam ad facere quia cumque magnam quisquam culpa praesentium aperiam qui voluptatem maxime corporis.
</div>
</div>
The reason for storing this is that slideToggle() will immediately sets the display of the answer to block, regardless of the animation (either to close, or open). For this reason, you need to determine if the answer is visible before animating the answer div (via the call to slideToggle()), so that you can use that state to control which up/down arrow is shown/hidden.
Here's an updated working jsFiddle for you to see :)
Here is the solution to your problem.
I have added
$('h3 img').toggle();
which will toggle the image accordingly.
Below is the working code.
$("img.down").hide();
$(".question h3").click(function(){
var b = $(this);
var a = b.parent(".question").children(".answer");
a.slideToggle();
$('h3 img').toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="question">
<h3>
А я могу ездить на Mercedes S-Class без прав?
<img src="img/icons/down.png" alt="down" class="down">
<img src="img/icons/up.png" alt="up" class="up">
</h3>
<div class="answer">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit aspernatur, consectetur amet mollitia quasi sint provident, totam ad facere quia cumque magnam quisquam culpa praesentium aperiam qui voluptatem maxime corporis.
</div>
</div>
Related
Im making a movie review page, i use a button to change the qualification.
How can i get the name of the movie when i press the button?
<div class="container-movies" id="container-movies">
<div class="movie">
<span class="text1" id="title">Transformers</span>
<p class="text2">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Labore soluta ullam officiis tempore sapiente, nesciunt veniam. Vitae explicabo labore soluta quis, omnis vero nulla, dignissimos necessitatibus repellat perferendis quisquam laboriosam.
</p>
<span class="text2">gen</span>
<div class="container-cal">
<span class="cal">4</span>
<button id="cal-btn">qualify</button>
</div>
</div>
<div class="movie">
<span class="text" id="title">movie title</span>
<p class="text2">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. At, sint fugit numquam dicta aperiam neque aliquam expedita ipsum sapiente assumenda rerum temporibus fuga similique sed, perspiciatis qui ipsa nihil adipisci.
</p>
<span class="text2">gen</span>
<div class="container-cal">
<span class="cal">4</span>
<button id="cal-btn">qualify</button>
</div>
</div>
This only sends me the name of the first node:
let cal = document.getElementById("cal-btn");
cal.addEventListener('click', getcal);
You can grab the constent of the id="title" and use it in the getcal function
const movieTitle = document.getElementById("title").innerText
document.getElementById("cal-btn"); will only return one element because ids are unique, you should use a class instead.
For each button, add a listener on click. Then because of the structure, search for the closest parent movie to find the title inside.
for (let btn of document.getElementsByClassName("cal-btn")) {
btn.addEventListener("click", () => {
console.log(btn.closest(".movie").querySelector(".title").textContent)
})
}
<div class="movie">
<span class="title">Transformers</span>
<button class="cal-btn">vote</button>
</div>
<div class="movie">
<span class="title">Another film</span>
<button class="cal-btn">vote</button>
</div>
You cant use the same id over and over again, in this case you should use a class or an custom attribute select all buttons and loop through them and call your function
let calBtns = document.querySelectorAll(".cal-btn");
calBtns.forEach(btn => {
btn.addEventListener('click', ()=>{
alert(btn.closest('.movie').querySelector('.title').innerText)
});
})
<div class="container-movies" id="container-movies">
<div class="movie">
<span class="text1 title">Transformers</span>
<p class="text2">Lorem ipsum</p>
<span class="text2">gen</span>
<div class="container-cal">
<span class="cal">4</span>
<button class="cal-btn">qualify</button>
</div>
</div>
<hr>
<div class="movie">
<span class="text title">movie title</span>
<p class="text2">Lorem, ipsum</p>
<span class="text2">gen</span>
<div class="container-cal">
<span class="cal">4</span>
<button class="cal-btn">qualify</button>
</div>
</div>
I have a main section. Under the main section I have 2 columns, one with flipbox and other with tabs. I want to trigger hover on flip box when I clicked tab2. I don't have any clue about the JS but tried few of the fiddle's I found, the closet one to what I want is http://jsfiddle.net/EZ33Y/1/ but I was not able to get it working properly.
What I am trying to achieve is to display image related to tab for e.g Tab1 displays img1 and tab2 displays img2 or trigger hover when tab2 is selected so flip image displays tab2 img2
TIA
$(function(){
$('.tabs label').click(function(){
$('.images img').hide();
$('#tab'+($(this).parent('li').index()+1)+'-img').show();
});
});
/* HTML */
<div class="elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-fd8fa18" data-id="fd8fa18" data-element_type="column" id="tab1">
<div class="elementor-column-wrap elementor-element-populated">
<div class="elementor-widget-wrap">
<div class="elementor-element elementor-element-d5d5298 elementor-widget elementor-widget-eael-adv-tabs" data-id="d5d5298" data-element_type="widget" data-widget_type="eael-adv-tabs.default">
<div class="elementor-widget-container">
<div id="eael-advance-tabs-d5d5298" class="eael-advance-tabs eael-tabs-horizontal" data-tabid="d5d5298">
<div class="eael-tabs-nav">
<ul class="eael-tab-top-icon">
<li class="active">
<i class="fas fa-home"></i> <span class="eael-tab-title">Tab Title 1 </span>
</li>
<li class="inactive">
<i class="fas fa-home"></i> <span class="eael-tab-title">Tab Title 2</span>
</li>
</ul>
</div>
<div class="eael-tabs-content">
<div class="clearfix active">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur. </div>
<div class="clearfix inactive">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, neque qui velit. Magni dolorum quidem ipsam eligendi, totam, facilis laudantium cum accusamus ullam voluptatibus commodi numquam, error, est. Ea, consequatur. </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have website, and I want to "cut" every div#id from .tab-content and add every div to every li only when viewport width is less than 768px.
My HTML page:
<section id="menu">
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul id="menu-nav" class="nav nav-pills text-center">
<li class="active"><h2>About</h2></li>
<li><h2>Services</h2></li>
<li><h2>Contact</h2></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="tab-content">
<div class="tab-pane active" id="about">
<div class="col-sm-8 col-sm-offset-2">
<p class="text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati.
</p>
</div>
</div>
<div class="tab-pane" id="services">
<div class="col-sm-8 col-sm-offset-2">
<p class="text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati.
</p>
</div>
</div>
<div class="tab-pane" id="contact">
<div class="col-sm-8 col-sm-offset-2">
<p class="text-center">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis odit id praesentium, maxime, harum corporis officia laboriosam earum laudantium mollitia et quas, iure enim expedita. Nam sit, est libero obcaecati.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
I tried to use jquery for every div#ID, but it's not working.
$(document).ready(function(){
if ($(window).width() < 768) {
var divAbout = $('#about').pop();
$(divAbout).appendTo('#menu-nav li:first-of-type');
}
});
I want to have that result on mobile:
<li>
<h2>About</h2>
<div id="about">
...
</div>
</li>
And the same to other divs.
You can use the resize handler and do
var flag;
$(window).on('resize.menu', function () {
var width = $(window).width(),
$ul = $('#menu-nav');
if (width < 768 && flag != 1) {
flag = 1;
$('#menu .tab-content .tab-pane').each(function () {
$(this).appendTo($ul.find('li:has(a[href="#' + this.id + '"])'))
});
} else if (width >= 768 && flag != 2) {
flag = 2;
$ul.find('.tab-pane').appendTo('#menu .tab-content');
}
}).trigger('resize.menu')
Demo: Fiddle
Hope you're looking to develop a responsive web design. Instead of cutting the DOM and adding it to the li tag. Use CSS3 media queries to show and hide elements based on elements width.
But here is an approach for your question:
$(document).ready(function(){
if ($(window).width() < 768) {
$(".tab-content div").each(function(index, ele) {
var id = this.id; // about , contact
$("li a[href='#'"+id+"]").parent().parent().append(this);
// this will match li with a having href="#about" etc
});
}
});
Hi I am new at angular js,
my question is how to add an icon to a tab in angular js?
That's what I have so far:
<tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}">
<tab heading="Tab 1 some text ">sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
<tab heading="Tab 2 ded">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam consectetur sint. Nobis facere illo iste quaerat sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
</tabset>
I'm adding <tab heading="Tab 2 ded <span class="icon-print">print</span>">
but it shows everything exactly as written inside the heading instead of rendering the span as I would exspect..
Please help me.
I assume you are using angular-ui bootstrap. Use tab-headingdirective and put your icon there.
<tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}">
<tab heading="Tab 1 some text ">sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
<tab>
<tab-heading>
<i class="icon-print"></i> Tab 2 ded
</tab-heading>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam consectetur sint. Nobis facere illo iste quaerat sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
</tabset>
I fixed my issue using this:
<tabset>
<tab heading="Static title">Static content</tab>
<tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disabled="tab.disabled">
{{tab.content}}
</tab>
<tab select="alertMe()">
<tab-heading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</tab-heading>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
more about this go for this link
For some reason, I got the following error using tab-heading as suggested above:
'tab-heading' is not a known element
Although the tab works fine, and the tab directive is present in my local lib. The documentation suggests the following sample:
<tab (select)="alertMe()">
<template tabHeading>
<i class="glyphicon glyphicon-bell"></i> Alert!
</template>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
That worked for me. Maybe due to a different version? Or some dependency or declaration missing. Feel free to correct me or enhance this response.
I am appending a html in to a div . But this is not working. please help me
<li>
<a data-cke-saved-href="" href="" class="active" data-bookmark="1">
Lorem ipsum dolor
</a>
<ul class="tab">
<li>
<p class="normal_p" style="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officia
architecto soluta maiores eos accusantium quos atque nihil? Facere, minus
eos cumque quasi dolor dolorum magnam quod non laborum placeat?
</p>
</li>
</ul>
</li>
<li>
<a data-cke-saved-href="" href="" class="active" data-bookmark="1">
Lorem ipsum dolor
</a>
<ul class="tab">
<li>
<p class="normal_p" style="">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere officia
architecto soluta maiores eos accusantium quos atque nihil? Facere, minus
eos cumque quasi dolor dolorum magnam quod non laborum placeat?
</p>
</li>
</ul>
</li>
i want append some html content in to a div. attId will generate dynamically. That generate successfully. i only know attId. other elements are same so i can only use attr.
var attId = 1;
var anchor = document.querySelector('[data-bookmark="'+ attId +'"]');
$(anchor).children("ul li").html($(this).html());
try this, because you're trying to get the children of the link and it does not have.
var anchor = $('.normal_p').closest("li");
anchor .html($(this).html());
or
var anchor = $('.tab').children();
anchor .html($(this).html());
Appending a whole html to a div sound somehow and moreso why querySelector() in jQuery, the question is not clear, perhaps you post chunk of code that well describe what you mean
From what you posted
//assuming there is a var attId as 1
var attId = 1
var anchor =$('[data-bookmark="'+ attId +'"]');
$(anchor).children("ul li").html($(this).html());
Although what you are trying to insert into the list items is not clear, but I hope this helps