I have a div which i want to toggle on click of a button. Its working but the div is not hiding on click of outside button. Below is my code pls check.
<div class='settings' ng-click="showDiv = !showDiv"></div>
<div class="profileSetting text-center" ng-show="showDiv">
<div></div>
<p class="small-font">Stephen Wilson <br/> steave#gmail.com</p>
<hr>
<p class="small-font"><img src = "images/settings.png" alt = "Generic placeholder thumbnail"> settings</p>
</div>
I want this profilesetting div should be hidden on click of outside.
Related
I have a show more button I want to expand a div with it, I can put the button in the div and target it's parent but I don't want it to be on top of the div which I want to expand and if I put it in the end the button hides with the text, I am gonna have more than one div, and I can keep the button outside the div and target the div using it's class but the reason I am gonna have more than one div the first div will expand not matter which button I click, and I don't wanna give each div an unique class or Id and I don't want to place the button in the div I already mentioned the reason, so is there a way to directly target the div or to place button in the div and still have it to be shown on the bottom without it being hidden
CODE
<div class="ccontainer" id="ccontainer">
<p id="context"> content </p>
<div class="img" id="cntimgcon">
<img src="images\image2.jpg" id="cntimgp1">
</div>
<p id="context"> content </p>
</div>
<button id="showmore" onclick=" this.parentElement.style.maxHeight = 'none'"> show more </button>
Someone told me to target the show more button from its Id then target it's upper sibling but it doesn't work.
At very first you named the Button opening tag with camelcase (first letter uppercase), the closing tag is lowercase.
Second I changed the "showmore" id to class. And please see the script what I made for you.
You can remove the class of the buttons also if you using getElementsByTag("button").
const buttons = document.getElementsByClassName("showmore");
console.log(buttons);
Array.from(buttons).forEach(button => button.addEventListener("click", (e)=> {
e.preventDefault();
const collapse = button.previousElementSibling; //https://www.w3schools.com/jsref/prop_node_previoussibling.asp
collapse.style.maxHeight = collapse.style.maxHeight == '0px' ? '200px' : '0px';
}));
<div class="ccontainer" id="ccontainer">
<p id="context"> content </p>
<div class="img" id="cntimgcon" >
<img src="images\image2.jpg" id="cntimgp1">
</div>
<p id="context"> content
</p>
</div>
<button class="showmore"> show more </button>
<div class="ccontainer" id="ccontainer">
<p id="context"> content </p>
<div class="img" id="cntimgcon" >
<img src="images\image2.jpg" id="cntimgp1">
</div>
<p id="context"> content
</p>
</div>
<button class="showmore"> show more </button>
<div class="ccontainer" id="ccontainer">
<p id="context"> content </p>
<div class="img" id="cntimgcon" >
<img src="images\image2.jpg" id="cntimgp1">
</div>
<p id="context"> content
</p>
</div>
<button class="showmore"> show more </button>
I am working on a personal project. I have few articles in a same page, that have pretty large amount of text (not that big though). What I want is toggling the button. Once the button is clicked the additional text should be displayed and the button value have to be changed (i.e. from continue reading to show less or something similar.) And again after clicking the button, the additional text have to be collapsed. In addition to that I want to add some slow motion while toggling between the text. How could I do that?
The example in the internet I have seen so far does not relate what I am expecting to achieve. Most demo and examples in the internet use the text property (e.g. simple show more and show less text), not the button element as I do.
<article class="post">
<header>
<div class="title">
<h2>Who am I? What am I? Why am I?</h2>
<p>Sub Header</p>
</div>
<div class="meta">
<time class="published" datetime="2017-01-14">November 1, 2017</time>
<span class="name">John Doe</span><img src="images/author-avatar.png" alt="" />
</div>
</header>
<img src="images/who_iam.jpg" alt="" />
<p>Default text<br>
Toggle this text. Show this text when "continue reading" button is clicked. Once the button is clicked change the button value to "read less". Once the "read less" button is clicked hide this text.
</p>
<footer>
<ul class="actions">
<li>Continue Reading</li>
</ul>
</footer>
</article>
If your are using jQuery then -
Initially hide the content with CSS.
Add slideToggle to hidden content on click event.
Here is a demo -> https://codepen.io/thesumit67/pen/wemjPG
You should create a button, with a simple javascript functiom:
visible = false; //var that keeps track if the content is visible.
txt = document.getElementById("text");
btn = document.getElementById("btn");
function toggle() {
if(visible) {
visible = 0;
btn.innerHTML = 'Show more';
txt.style.display = 'none';
} else {
visible = 1;
btn.innerHTML = 'Show Less';
txt.style.display = 'block';
}
}
<article class="post">
<header>
<div class="title">
<h2>Who am I? What am I? Why am I?</h2>
<p>Sub Header</p>
</div>
<div class="meta">
<time class="published" datetime="2017-01-14">November 1, 2017</time>
<span class="name">John Doe</span><img src="images/author-avatar.png" alt="" />
</div>
</header>
<img src="images/who_iam.jpg" alt="" />
<p>Default text</p>
<p id='text' style='display: none;'>
Toggle this text. Show this text when "continue reading" button is clicked. Once the button is clicked change the button value to "read less". Once the "read less" button is clicked hide this text.
</p>
<footer>
<ul class="actions">
<li><button id='btn' onclick='toggle()'>Show More</button></li>
</ul>
</footer>
</article>
I have the following code. I need to hide div 1 and display div2 when the button in div one is clicked. (In ANGULAR HTML5). I have a JS file with controllers etc. at the moement I have two diffetent html template files and I call these as separate modal pop up. Now instead of two pop ups, I need to just show only one pop up but just display or hide content from one of the divs.
<div id="div1">
<button name ="click" click="ClickMe()"/>
</div>
<div id = "div2">
<p> Some content</p>
</div>
This should toggle displayToggled on click, and remove the div from which the button was clicked from the DOM.
<div id="div1" ng-if="!displayToggled" >
<button name ="click" ng-click="displayToggled = true"/>
</div>
<div id = "div2" ng-if="displayToggled">
<p> Some content</p>
</div>
In your html
<body ng-app="myApp" ng-controller="myctrl as ctrl">
<div id="div1" ng-show="ctrl.btn">
<button name ="click" ng-click="ctrl.btn=!ctrl.btn"/>
</div>
<div id = "div2" ng-show="!ctrl.btn">
<p> Some content</p>
</div>
</div>
in your controller
.controller('myctrl', function(){
this.btn = true;
})
HTML -
<div class="col-md-3" ng-repeat="idea in ideas">
<div class="col-md-12 ideaResult" ng-mouseleave="hideIcon()">
<a class="resultCover col-md-12" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.coverImage}});"></a>
<div class="sharebtn icon-btn" ng-click="socialIcon = !socialIcon">
<span style="background-image:url('/images/idea/share-add.png');background-color:white" title="Share" class="iconContainer"></span>
</div>
<div class="share-fb share-icon" ng-show="socialIcon">
<span class="iconContainer" title="Share" style="background-image:url('/images/idea/fb-icon.png');background-color:white"></span>
</div>
<div class="share-tw share-icon" ng-show="socialIcon">
<span class="iconContainer" title="Share" style="background-image:url('/images/idea/twitter-icon.png');background-color:white"></span>
</div>
<div class="share-msg share-icon" ng-show="socialIcon">
<span class="iconContainer" title="Share" style="background-image:url('http://cdn.thegadgetflow.com/wp-content/themes/thegadgetflow4/images/email-icon.png');background-color:white"></span>
</div>
<div class="endorse-icon icon-btn">
<span style="background-image:url('/favicons/favicon-96x96.png');background-color:white" title="Endorse" class="iconContainer"></span>
</div>
<div class="resultIcon">
<span title="my goal" class="iconContainer" style="background-image:url(https://le-uploaded-image-bucket.s3.amazonaws.com/{{idea.goalIcon}});background-color:{{idea.backgroundColor}}">
</span>
</div>
<h2 class="resultName">{{idea.title}}</h2>
<div class="col-md-12 resultDescription"><p>{{idea.description | limitTo: 48}}{{idea.description.length > 48 ? '...' : ''}}Continue Reading</p></div>
</div>
</div>
Controller JS -
$scope.hideIcon = function(){
$scope.socialIcon = false;
};
Requirement -
I want to hide the DIVs with "share-icon" class when mouse pointer go out of the parent DIV(i.e. DIV with class ideaResult), but at the same time I click on the DIV with class name "shareBtn" which will result in toggling those three DIVs with "share-icon" class which is working fine.
Problem -
When the page is loaded, these three DIVs (ie. "share-icon" class) are already hidden which is fine but when I click on the DIV with class "shareBtn", these DIVs appear which is also fine, but when mouse pointer goes out of the parent DIV ("ideaResult"), these three DIVs continues to be appear which I don't want.
Can someone help me to solve this problem ? Thanks in advance
Here is the Mock Fiddle - https://jsfiddle.net/x2zzppoa/
The visibility on those 3 divs isn't related to the class "share-icon", but to $scope.socialIcon, whitch initialy is set to undefined, and after you click the upper div it is set to true, hence the visibility of your divs.
The solution for this code snippet is probably:
ng-mouseleave="socialIcon = false"
https://jsfiddle.net/ronapelbaum/x2zzppoa/1/
With the help of other members I have the following code that allows to show and hide divs one at a time.
If I click on a button it will show the corresponding div and if I click on another button, the previous div goes away and the next will show.
However, when I click on a button to show a div, it does not have any transition or timing effect. It shows up immediately
If in the function I add a timing like this.. $(id).show(800); It will have the transition or fadeIn effect, but if someone click on a button to show the div and click on the same button again to hide it, the div will go away and return right back.
Can someone help me to add that transition or fadeIn on a way that if the button is clicked to hide the div it will stay hidden?
This is what I have:
<p class="btn" onclick="toggleDivs('#div1');">Show div1</p>
<p class="btn" onclick="toggleDivs('#div2');">Show div2</p>
<p class="btn" onclick="toggleDivs('#div3');">Show div3</p>
<p class="btn" onclick="toggleDivs('#div4');">Show div4</p>
<div class="fadeOut" id="div1" style="display:none"; >
<div class="fadeOut" id="div1" style="display:none"; >
<div class="container">
<p>This is the content of div1</p>
</div>
<div class="fadeOut" id="div2" style="display:none"; >
<div class="container">
<p>This is the content of div2</p>
</div>
<div class="fadeOut" id="div3" style="display:none"; >
<div class="container">
<p>This is the content of div3</p>
</div>
<div class="fadeOut" id="div4" style="display:none"; >
<div class="container">
<p>This is the content of div4</p>
</div>
var toggleDivs = function (id) {
$(".fadeOut").hide(800);
$(id).show();
}
you should disable all buttons untill the end of the animation:
var toggleDivs = function (id) {
$('.btn').attr('disabled', true)
$(".fadeOut").hide(800, function() {
$(id).show(800, function() {
$('.btn').attr('disabled', false);
});
});
}
I suggest you add another class to your buttons that are going to be disabled in order to not disable all buttons with class btn in the DOM.