I would really appreciete any help in the following task.
The task is pretty simple. I have a couple of paragraphs of text. Each paragraph has a title and desription. Decription should be hidden, and shown only after clicking "plus" button. On click "plus" icon should change to "minus". So far, I have maganed to acheve this. But then, after clicnkin again, text should hide again (that works), but the icon should change to "plus" again. And here I am failing. I have tried many ideas I found in the Internet, but could't make it working.
My HTML code:
<div class='toggle-description'>
<p class='event-type speaker-country'>$event_type</p>
<button class='plus-button'>
<img class='plus-icon' src='https://cdn-icons-png.flaticon.com/512/748/748113.png'>
<img class='minus-icon' src='https://cdn-icons-png.flaticon.com/512/43/43625.png'>
</button>
<h4 class='lt-opis'>$event_title</h4>
<div class='more-text' style='display: none;'>
<p>$event_description</p>
</div>
</div>
jQuery code:
$(document).ready(function() {
$(".minus-icon").hide();
$(".plus-button").click(function(){
$(this).closest(".toggle-description").find(".more-text").toggle();
var button_plus = $(this).closest(".toggle-description").find(".plus-icon");
button_plus.css("display", "none");
var button_minus = $(this).closest(".toggle-description").find(".minus-icon");
button_minus.css("display", "block");
});
});
$(document).ready(function() {
$(".minus-icon").hide();
$(".plus-button").click(function(){
$(this).find(".plus-icon").toggle();
$(this).find(".minus-icon").toggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='toggle-description'>
<p class='event-type speaker-country'>$event_type</p>
<button class='plus-button'>
<img class='plus-icon' src='https://cdn-icons-png.flaticon.com/512/748/748113.png'>
<img class='minus-icon' src='https://cdn-icons-png.flaticon.com/512/43/43625.png'>
</button>
<h4 class='lt-opis'>$event_title</h4>
<div class='more-text' style='display: none;'>
<p>$event_description</p>
</div>
</div>
In the jquery part change this button_plus.css("display", "none"); to button_plus.toggle() and button_minus.css("display", "block"); to button_minus.toggle() and it works.
jsfiddle link
Related
First of all, I've seen this Close Bootstrap Modal but of some reason it's not working for me.
I have a page, where one modal is called from like this
<button type="button" #onclick="#(()=>modal.Show<LandingPageHelpPopUp>())" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">Click here to get help</button>
That page's code look like this
<div class="modal-dialog" id="myModal" style="margin-left:-200px;margin-bottom:-550px;position:absolute;">
<div class="modal-content" style="background-color:gray;">
<div class="modal-body" style="color:black;">
<p>Here you can observe the controlling of the curtains by others. If the queue is empty, and you'll like the control, hit this button.</p>
<div class="modal-footer" style="float:right;border:none;margin-bottom:-25px;">
<label class="custom-close" #onclick="#(()=>modal.Show<LandingPageHelpPopUp2>())">Next page</label>
<button class="next-button" style="margin-left:-3px;"><i class="fa fa-angle-right"></i></button>
</div>
</div>
</div>
</div>
<img src="css/arrow-help.png" class="arrow-help">
From here, I'd like to see another modal. To do that, I guess I have close the first one first, in order to not create a double layer of modals - if that makes sense. That's where I have used the linked thread in the beginning, but somehow it doesn't work.
The second modal's code look like this
<div class="modal-dialog" id="myModal2" style="margin-left:-200px;margin-bottom:-550px;position:absolute;">
<div class="modal-content" style="background-color:gray;">
<div class="modal-body" style="color:black;">
<p>If other users is in the queue, click here to get in line.</p>
<div class="modal-footer" style="float:right;border:none;margin-bottom:-25px;">
<label #onclick="#(()=>modal.Show<LandingPageHelpPopUp>())">Previous page</label>
<button class="next-button" style="margin-left:-3px;margin-top:-2px;"><i class="fa fa-angle-right"></i></button>
</div>
</div>
</div>
</div>
<img src="css/arrow-help2.png" class="arrow-help2">
In my index.html I've these two scripts, that is meant to toggle the modals. That is if one modals is open, when the other one is shown, it should close.
<script>
$(function () {
$(".custom-close").on('click', function () {
$('#myModal').modal('hide');
});
});
</script>
<script>
$(function () {
$(".custom-close2").on('click', function () {
$('#myModal2').modal('hide');
});
});
</script>
Here's some screenshots, showing that the previous modal does not get closed, so it's just creating multiple layers of modals on top of each other. Here, Here, And here
Sorry for all the unnecessary code (styling, bad naming etc)
Doe any of you know why the previous modal is not getting closed, whenever the next is getting shown?
I've looked for solutions online and it seems that there's something called the data-attribute that I can use to do what I want.
I have two different modal windows, each with its own content, and I want to link each of them to a specific button (or in my case, an image that the user will click on). I tried putting in the "data-attribute", but the second modal window (the one with the id, fujian), is not popping up when I click on the corresponding image.
Does anyone have any suggests or ideas as to why this isn't working and what I should do?
<!--The two image icons that user clicks on-->
<a href='#' onclick='overlay()'><img src="city1.png" alt="sichuan" class="city1"/></a>
<img src="city2.png" alt="sichuan" class="city2"/>
<div id="overlay">
<!--The two separate modal windows-->
<div class="modal">
<img src="sichuan.png" alt="sichuan popUp"/>
<a class="closing" href='#' onclick='overlay()'><img src="/Users/KarenLee/Desktop/exit.png"></img></a>
</div>
</div>
<div id="overlay">
<div class="modal" id="fujian">
<img src="fujian.png" alt="fujian popUp"/>
<a class="closing" href='#' onclick='overlay()'><img src="/Users/KarenLee/Desktop/exit.png"></img></a>
</div>
</div>
And here is my overlay() function if you need to see it:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
id's must be unique through out the document and you have repeating id <div id="overlay">
You can achieve with single modal what you are trying to achieve with 2 modals with data-attributes
Missing key div elements in modal HTML and that's why with your code only modal-backdrop is showing, nothing else
as far you asked about data-attribute, the anchor <a></a> element has two custom data attributes: data-toggle and data-target.
The toggle tells Bootstrap what to do and the target tells Bootstrap which element is going to open.
So whenever <a></a> link like that is clicked, a modal with targeted id will appear.
let's suppose you have 2 images and wants to show in modal, opening modal with default bootstrap behaviour and also can pass the image to modal using data-attributes which in this case data-image and using bootstrap modal event listener, can show the image in modal when modal open (no need of 2 modals)
<a data-target="#fujian" data-toggle="modal" data-image="http://tympanus.net/Tutorials/CaptionHoverEffects/images/1.png" class="btn btn-primary">Image 1</a>
<a data-target="#fujian" data-toggle="modal" data-image="http://tympanus.net/Tutorials/CaptionHoverEffects/images/2.png" class="btn btn-warning">Image 2</a>
And Modal HTML will be
<div id="fujian" class="modal fade">
<div class="modal-dialog"> //Missing this Div
<div class="modal-content"> //Missing this Div
<div class="modal-body">
<img class="showimage" src="" /> //Image will be shown Here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
and bootstrap event listener
$(document).ready(function () { //Dom Ready
$('#fujian').on('show.bs.modal', function (e) { //Event listener
var image = $(e.relatedTarget).data('image'); //Fetch image url from modal trigger <a> link
$(".showimage").attr("src", image); //load image in modal
});
});
Fiddle
I have a clickable span, which has a button in it. I want the span to go to one href and the button to another. Here is the code I currently have:
<script>
function deleteAlbum(url) {
var txt;
var r = confirm("Do you really want to delete this album?");
if (r == true) {
window.location.href = url;
}
document.getElementById("demo").innerHTML = txt;
}
</script>
<a href='gallery.php?album=16022015NewTest'>
<span class='album'>
<p>New Test</p>
<p>16/02/2015</p>
<button class='delete' onClick=deleteAlbum('gallery.php?delete_album=16022015NewTest')>
Delete Album
</button>
</span>
</a>
Anyone have any ideas?
You want to read up on event bubbling - the quirksmode explanation in that answer is very nice.
Here's one possible fix for your example:
<script>
function gotoAlbum(albumId) {
window.location.href="gallery.php?album="+albumId;
}
function deleteAlbum(e, url) {
var r = confirm("Do you really want to delete this album?");
if (r == true) {
window.location.href = url;
}
e.stopPropagation();
}
</script>
<span class='album' onClick="gotoAlbum('16022015NewTest');" >
<p>New Test</p>
<p>16/02/2015</p>
<button class='delete' onClick="deleteAlbum(event, 'gallery.php?delete_album=16022015NewTest');">Delete Album</button>
</span>
Aside: as the other comments mention, a button inside an anchor is odd - it's not compliant HTML5 - see this question
You don't. Don't put <button> inside <a>.
According to atmd's comment restructure your html: Don't put button inside a. To be html conform use quotes for attribute values:
<div class="album">
<a href="gallery.php?album=16022015NewTest">
<p>New Test</p>
<p>16/02/2015</p>
</a>
<button class="delete" onClick="deleteAlbum('gallery.php?delete_album=16022015NewTest')">Delete Album</button>
</div>
So the a tag does not include the button tag. It is also a good idea not to have block elements inside inline elements. The span tag has already been changed to a div tag. You might also change the p tags to span. Then the html looks like this:
<div class="album">
<a href="gallery.php?album=16022015NewTest">
<span>New Test</span>
<span>16/02/2015</span>
</a>
<button class="delete" onClick="deleteAlbum('gallery.php?delete_album=16022015NewTest')">Delete Album</button>
</div>
my json responce is {isVimeo = true } in angular js
<div ng-show={{isVimeo}}>
----
----
------
</div>
I want to show this div when isVimeo is true,but it is not display at my html.when i click inspect element in my html page the following code is there
<div ng-show="true" class="ng-hide">
</div>
when i remove the ng-hide class in inspect element it is displaying.By default it is not displayong
Can anyone help!
Thanks!
<div ng-show="isVimeo">
And be sure $scope.isVimeo is set to true in the current scope.
angular.module('testApp',[]).controller('testCTRL',function($scope)
{
$scope.wantToShow = true;
$scope.dontShow = false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<head>ng-show example:</head>
<body data-ng-app="testApp">
<div data-ng-controller="testCTRL">
<br>
<b>ng-show is true:</b>
<span data-ng-show="wantToShow"> It is showing this becuase ng-show is true</span>
<br><br>
<b>ng-show is false(So,nothing we are showing):</b>
<p data-ng-show="dontShow">It is showing this becuase ng-show is true</p>
</div>
</body>
I have a problem with toggle on this list:
<div id="list">
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
<div id="segment"> // <--- when clicked, toggle segm_content and opener
<div id="opener">
<img src="images/open.png" /> // changes when toggled
</div>
<div id="segm_content">
// content to hide/show
</div>
</div>
... //and so on
</div>
I want clicked "#segment" to toggle child *"#segm_content"* and change img in "#opener".
I made it working with this code:
$('#segment').toggle(function() {
$('#opener').html('<img src="images/open.png"/>');
$('#segm_content').hide(500);
}, function() {
$('#opener').html('<img src="images/close.png"/>');
$('#segm_content').show(500);
});
But I can't figure out how to do it only for one "#segment" at a time.
This code toggles everything, which I don't want.
I am stuck at this point, any suggestions please?
Many thanks!
I really wouldn't recommend this. The point of an id is to reference a unique element. If you want to select multiple elements, you should define a class instead and have jQuery call that. Multiple ids is invalid HTML. But you could, per sé, do this by using changing your jQuery code to the following.
(Here is my jsFiddle: http://jsfiddle.net/KzVmK/)
$('[id="segment"]').toggle(
function(){
$(this).find('[id="opener"]').html('<img src="open.png" alt="Close" />');
$(this).find('[id="segm_content"]').hide(500);
},
function(){
$(this).find('[id="opener"]').html('<img src="close.png" alt="Open" />');
$(this).find('[id="segm_content"]').show(500);
}
);
Again, let me stress again that this is a bad idea, because you will not have unique id selectors in your document. This is really bad practice. There are times when you will want to select an individual element in the DOM and this will make that next to impossible. I would highly advise you to define a class for the elements (you can still define CSS classes, e.g. <div class="opener my-class" /> or <div class="segm_content my-class" />).
(Also, a helpful tip with this code: rather than populating the HTML elements with the same image that is also in the jQuery code [which is redundant], leave the <div id="opener" /> elements empty. Then, right after you define the toggle function, run the click event, like so: $('[id="$segment"]').toggle(...).click();
http://jsfiddle.net/XPXBv/).
General Theme Settings
Back-Ground Color
Text Color
<div class="Settings" id="GTSettings">
<h3 class="SettingsTitle"><a class="toggle" ><img src="${appThemePath}/images/toggle-collapse-light.gif" alt="" /></a>Content Theme Settings</h3>
<div class="options">
<table>
<tr>
<td><h4>Back-Ground Color</h4></td>
<td><input type="text" id="body-backGroundColor" class="themeselector" readonly="readonly"></td>
</tr>
<tr>
<td><h4>Text Color</h4></td>
<td><input type="text" id="body-fontColor" class="themeselector" readonly="readonly"></td>
</tr>
</table>
</div>
</div>
$(document).ready(function(){
$(".options").hide();
$(".SettingsTitle").click(function(e) {
var appThemePath = $("#appThemePath").text();
var closeMenuImg = appThemePath+'/images/toggle-collapse-light.gif';
var openMenuImg = appThemePath+'/images/toggle-collapse-dark.gif';
var elem = $(this).next('.options');
$('.options').not(elem).hide('fast');
$('.SettingsTitle').not($(this)).parent().children("h3").children("a.toggle").children("img").attr('src', closeMenuImg);
elem.toggle('fast');
var targetImg = $(this).parent().children("h3").children("a.toggle").children("img").attr('src') === closeMenuImg ? openMenuImg : closeMenuImg;
$(this).parent().children("h3").children("a.toggle").children("img").attr('src', targetImg);
});
});