I am trying to enable view / hide feature in my faq questions, but however at the moment to trying to access to my child answers_body with children I got an error . children is not a function, how can I properly access to answers_body in order to change display:none to display:block
<section class="faqs">
<div class="accordion row">
<div class="__block col-lg-7 mx-auto py-3">
<div class="row justify-content-between align-items-start">
<div class="col-11">
<h3 class="__question">
demo
</h3>
</div>
<div class="col-1">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="12"><path fill="none" stroke="#5267DF" stroke-width="3" d="M1 1l8 8 8-8" /></svg>
</div>
</div>
<div class="answers_body"> I want to access to this node in order to display it
<div class="col">
<p class="answer">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt justo eget ultricies fringilla. Phasellus blandit ipsum quis quam ornare mattis.
</p>
</div>
</div>
</div>
</section>
$('.__question').click(function(){
var $parent = $(this);
console.log($patern[0].InnerText)
});
If you are trying to do a toggle effect for your faq, then you can try the following.
$('.__question').click(function() {
var parent = $(this).parents('.accordion.row');
if (parent.find('.answers_body').hasClass('answers-active')) {
parent.find('.answers_body').removeClass('answers-active');
} else {
parent.find('.answers_body').addClass('answers-active');
}
});
Here you need to find the parent that is common to both the element you are clicking and the element you need show. Then using .find() method you can target the element and show. Refer the fiddle
UPDATE
Since you said this is not working, I think the parent class that is used for all faq is wrong. If you can update the code, I can help with that. Else you can use the following code.
$('.__question').click(function() {
var parent = $(this).closest('.row').siblings('.answers_body');
if (parent.hasClass('answers-active')) {
parent.removeClass('answers-active');
} else {
parent.addClass('answers-active');
}
});
Related
I am using the following jQuery code to try to get the text inside the element and add it to my variable:
<script>
var title = $('h3').html();
alert(title);
</script>
However, my browser is alerting me 'undefined' instead of the value inside the tag. Any idea what I am doing wrong?
Here is the html section for reference:
<article>
<div class="row">
<div class="columns large-6 large-centered medium-8 medium-centered small-12">
<h3>This is the post title</h3>
<h4>written by <b>Myself</b></h4>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacinia urna sit amet convallis dictum. Curabitur non sodales orci. Praesent vel gravida felis. Cras ultricies velit mi, eget efficitur ipsum tempus nec.</p>
</section>
</div>
</div>
</article>
Thanks,
This is the solution using plain JavaScript; you don't actually need jQuery here.
var h3element = document.getElementsByTagName("h3")[0];
This returns an array of all h3 elements in the document, of which you'll take the 0th index. Then, simply access the innerHTML property:
var h3content = h3element.innerHTML;
A complete solution would look something like:
<script>
var title = document.getElementsByTagName("h3")[0].innerHTML;
alert(title);
</script>
Try to wait for your document to trigger the ready event, if your code is beyond your tag, for example in the header. And if you only need the text, use the text function in jQuery.
<script>
$(function() {
var title = $('h3').text();
alert(title);
});
</script>
Do something like:
alert(document.getElementsByTagName('h3')[0].innerHTML)
I am using pagination with ajax to display my records but at the end I got these error in my console whenever I click on the button for next page.
This is the error which I get
jquery-2.2.3.min.js:4 GET http://localhost:8000/ajax/products?page=2 500 (Internal Server Error)
My controller is:
public function index()
{
$hospitals = Hospital::paginate(3);
return View::make('patientPanel/patientHospital')->with('hospitals',$hospitals);
}
}
My routes are
Route::get('/patientPanel/patientHospital',
'patientHospitalController#index');
Route::get('ajax/patienthospital',function(){
$hospitals = Hospital::paginate(3);
return
View::make('/patientPanel/patientHospital')>with('hospitals',$hospitals)->render();
});
And my view
<section id="team">
<div class="container">
<div class="row">
#foreach($hospitals as $hospital)
<div class="col-md-3 col-sm-6 col-xs-12 wow fadeIn content" data-
wow-offset="50" data-wow-delay="1.3s">
<div class="team-wrapper">
<img src="/uploads/{{$hospital->picture }}" class="img-responsive" alt="team img 1" style="height: 270px; width: 500px">
<div class="team-des">
<h4>{{$hospital->name}}</h4>
<span>Designer</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elitquisque tempus ac eget diam et laoreet phasellus ut nisi id leo molest.</p>
</div>
</div>
</div>
#endforeach
</div>
{{$hospitals->links()}}
</div>
</section>
<script type="text/javascript">
$(document).on('click','.pagination a',function(e){
e.preventDefault();
var page = ($(this).attr('href').split('page='))[1];
getProducts(page);
});
function getProducts(page)
{
$.ajax({
url:'ajax/patientHospital?page?page='+page
}).done(function(data){
$('.content').html(data);
location.hash = page;
});
}
</script>
This is my code please tell me what I have done wrong because of which I am getting this error.
in this a syntax error in my route resturn statement
return
View::make('/patientPanel/patientHospital')>with('hospitals',$hospitals)->render();
write as
return
View::make('/patientPanel/patientHospital')->with('hospitals',$hospitals)->render();
So far I manage to open one modal by clicking on any of the divs. How can I have one modal for one div element, that is I would like when I click on services to open services modal, and when I click on about to open about modal...and so on..I also have to close every modal when one is opend...I dont know how to connect each div with it's own modal. This is the code I have...
<div class="section">
<div class="container">
<div class="row">
<div class="col-md-4 sector">
<h3>Services</h3>
<i class="fa fa-gear"></i>
<div class="over">
<span class="tooltiptext">Show more...</span>
</div>
</div>
<div class="col-md-4 sector">
<h3>About me</h3>
<i class="fa fa-address-card-o"></i>
<div class="over">
<span class="tooltiptext">Show more...</span>
</div>
</div>
<div class="col-md-4 sector">
<h3>Contact</h3>
<i class="fa fa-phone"></i>
<div class="over">
<span class="tooltiptext">Show more...</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-container" id="myMod">
<div class="modal-content">
<span class="close">×</span>
<h1>Heading</h1>
<p>Some text goes in here...</p>
</div>
</div>
<div class="showcase">
<div class="container">
<h1>Got Ideas?</h1>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed sem rhoncus urna iaculis faucibus. Pellentesque ultrices nibh ac imperdiet tincidunt. Donec hendrerit velit eros</p>
Read More
</div>
</div>
<script type="text/javascript">
// Get the button that opens the modal
var myOver = document.getElementsByClassName('over');
// Get modal to pass it to function
var modal = document.getElementById('myMod');
// get closing button
var span = document.getElementsByClassName('close')[0];
// Function to open the modal
for(var i = 0; i<myOver.length; i++){
myOver[i].addEventListener('click', function(){
modal.style.display = 'block';
});
}
// When the user clicks on <span> (x), close the modal
span.onclick = function(){
modal.style.display='none';
}
</script>
You could use a similar naming scheme and find the right text simply by by appending a suffix to the object that was clicked on's id, for instance have each span element have an id corresponding to the modal they go with. For instance contact then have the click event listener be
function(e) { //e is the event object event
document.getElementById(e.target.id + "-modal").style.display = 'block'
}
now id the contact modal as 'contact-modal' and it should find it easily
As for closing each element, just iterate through all elements with the class modal-contain and set their display to none before opening the
new one
I looked up many questions on this topic and there are similar answers that should work, but it's not working for me. I admit DOM traversal is not my strong point, so if you have a solution and can give some context it would really help me understand why the other solutions weren't working.
I have a div with a button and on a button click (this button only appears on mobile) it should slide down only the current div content. I can get this to work, but the issue is it opens up ALL the divs content. I cannot however get it to only open the specific card even using solutions such as $(this), $(next), $(prev) or $(find).
The code I am posting below does not open it at all, and I am using this version of the code because it is most similar to answers on Stack Overflow.
$(document).ready(function(){
$('.mobile-icon').on('click', function(){
event.preventDefault();
$(this).next().find('.card-bottom').slideToggle();
console.log('hi there'); //this does print
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<span class="glyphicon glyphicon-plus"></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
<!-- SECOND CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<span class="glyphicon glyphicon-plus"></span>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
The main issue is how you're using jQuery's .next() and .find(). Since $(this) is the <a> tag, .next(), which selects the next sibling, is the <p> tag. Then calling .find() on the <p> tag would check through all its descendants, for which there are none.
Therefore you need to select the parent of both the 'card-top' and 'card-bottom' divs before you traverse down with .find().
For example:
$(document).ready(function(){
$('.mobile-icon').on('click', function(event){
event.preventDefault();
$(this).parent().parent().find('.card-bottom').slideToggle();
});
});
The first call to .parent() will be the parent of the <a> tag, which is the 'card-top' div, and the .parent() of that will be the 'card' div. Then calling .find() will work.
http://www.bootply.com/UMwXaOILHv
Missing the closing " on class="card>
Add event to function() so it's function(event)
If you don't need to link anywhere use a div instead of an a tag and you won't need preventDefault.
$('.mobile-icon').on('click', function(event) {
event.preventDefault();
$(this).closest('.card').find('.card-bottom').slideToggle();
// .closest finds the nearest .card ancestor (it goes up)
// .find then finds .card-bottom within the closest .card
});
.mobile-icon {
background-color: black;
width: 100px; height: 40px;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- FIRST CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
<div class="mobile-icon">click me</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
<!-- SECOND CARD -->
<div class="card">
<div class="card-top">
<h1 class="card-title">Headline</h1>
click me
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p>
</div>
<!-- END CARD-TOP -->
<div class="card-bottom">
<p>Content to be toggled</p>
</div>
<!-- END CARD BOTTOM -->
</div>
<!-- END CARD -->
fiddle
https://jsfiddle.net/Hastig/m2zaLfnz/
I have tried so far and made some pretty long code. This seems okay when one is having less then five or ten divs. But what if these are to be implemented on 20 or more than that....?
Can there be any compact form of the code I have tried to write.
( I am some novice in jquery to build complex function but try to write these sorts. )
Any one can help..?
Fiddle is here : http://jsfiddle.net/Ud574/27/
The Code is as follows.
$(document).ready(function(){
$('.button').click(function() {
$('.content').hide(500)
$('.headOne').addClass("classRight");
$('.content1').show(500)
});
$('.button1').click(function() {
$('.content1').hide(500)
$('.headTwo').addClass("classRight");
$('.content2').show(500)
});
$('.button2').click(function() {
$('.content2').hide(500)
$('.headThree').addClass("classRight");
$('.content3').show(500)
});
$('.button3').click(function() {
$('.content3').hide(500)
$('.headFour').addClass("classRight");
$('.buttonLast').click(function() {
$('.content').show(500)
$('.headOne,.headTwo,.headThree, .headFour').removeClass("classRight");});
});
});
<doctype html>
<html>
<head>
<title> div collapse</title>
</head>
<body>
<div class="headOne"> Emplyee personal record</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum <br />
<div class="button">Click me</div>
<br />
</div>
<div class="headTwo"> Emplyee personal record</div>
<div class="content1">Pellentesque felis elit, tempor vitae dapibus facilisis, sollicitudin id diam. <br />
<br />
<div class="button1">Click me</div>
</div>
<div class="headThree"> Emplyee personal record</div>
<div class="content2">Aliquam id lectus pellentesque viverra<div class="button2">Click me</div></div>
<div class="headFour"> Emplyee personal record</div>
<div class="content3">Aliquam a magna ac lacus eget porta. Maecenas viverra mi id lectus pellentesque viverra</div>
<div class="button3">Click me</div><br />
<br />
<div class="button4">Go To Previous section </div></div>
<div class="buttonLast">Go To Previous section </div>
</body>
</html>
If I understand correctly, you need something similar to the Accordion control.
Have a look at jQuery UI Accordion on the following url: http://jqueryui.com/accordion/
Does this sound reasonable to you?
I played with your code a bit and simplified it a lot, using built-in jQuery functions. Here's the HTML:
<div class="closable"> Employee personal record
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum ullamcorper convallis.
</div></div>
<div class="closable"> Employee personal record
<div class="content">Pellentesque felis elit, tempor vitae dapibus felis eu erat. <br />
</div></div>
<div class="closable"> Employee personal record
<div class="content">Aliquam eget porta. Maecenas viverra mi id lectus pellentesque viverra</div></div>
<div class="closable"> Employee personal record
<div class="content">Aliquam a magna ac justo accumsan porttitor.</div></div>
<div class="button4">Go To Previous section </div></div>
Here's the Javascript:
$(document).ready(function(){
$('.content').first().show();
$('.closable').click(function() {
if ($(this).find('div').first().is(':visible')){
$(this).find('div').first().hide();
$(this).next().find('div').first().show();
}else{
$(this).find('div').first().show();
}
});
});
And the CSS:
.content{display:block;}
.content{font-weight: normal; border: 0;display:none;}
.closable{font-weight:bold;border:1px solid #CCC;}
Hope this helps!