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>
Related
I am trying to develop a page where there would be multiple divs, each of these divs have a button of which would show a "dropdown" style div below it when clicked.
Currently I have some code which when one button is clicked, it shows all of the "dropdown" styled divs on the page instead of just the one in the same container as the button.
I would like this to be done in pure JavaScript without jquery, any help would be appreciated, thank you!
HTML
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog()"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog() {
var btn = document.getElementsByClassName("mobileShowActivityFeedBtn");
var activity = document.getElementsByClassName("mobileDropDown");
for(var i=0; i<btn.length; i++) {
for(var j=0; i<activity.length; j++) {
if(activity[j].style.display == "none") {
activity[j].style.display = "flex"
} else {
activity[j].style.display = "none"
}
}
}
}
I think the easiest way is to send a parameter to the method and getElementById with a concatenated string with the parameter.
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(1)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown-1">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<div class="resultMenu">
<button onclick="mobileActivityLog(2)"> Show activity feed </button>
</div>
</div>
<div id="mobileDropDown-2">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
JS
function mobileActivityLog(index) {
var activity = document.getElementsById("mobileDropDown-" + index);
if(activity.style.display == "none") {
activity.style.display = "flex"
} else {
activity.style.display = "none"
}
}
One of the best possible ways to achieve this is to pass the current context using 'call' in the HTML. Use this context to target the required result container(here 'mobileDropDown' container).
function mobileActivityLog () {
var _this = this;
var activity = _this.closest('.resultContainer').querySelector(".mobileDropDown");
activity.classList.toggle('hide');
}
.hide {
display: none;
}
<div class="fullResultsContainer">
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
<div class="resultContainer">
<div class="resultRow">
<!-- This has multiple divs but this is the only one relevant to the issue-->
<div class="resultMenu">
<button class="mobileShowActivityFeedBtn" onclick="mobileActivityLog.call(this)"> Show activity feed </button>
</div>
</div>
<div class="mobileDropDown">
<p> This is the content I want to show on button click</p>
</div>
</div>
</div>
Need to display a div when the user clicks the button.
//html-code
<div class="col-md-4">
<h4 class="service-heading">Sociala Medier</h4>
<p class="text-muted">first line of text.</p>
<div class="info-text" style="display:none">
<p class="text-muted">Second line of text.</p>
</div>
<button class="info-button"><span>Läs mer </span></button>
</div>
//js-code
document.getElementByClassName("info-button").addEventListener("click", function(){
document.getElementByClassName('info-text').style.display = "block";
});
Any advice how I can get this to work? Also tested with onclick but that doesn't work either.
You're passing elements classes to the .getElementById function. In short, you could change your HTML to this:
<div class="col-md-4">
<h4 class="service-heading">Sociala Medier</h4>
<p class="text-muted">first line of text.</p>
<div id="info-text" style="display:none">
<p class="text-muted">Second line of text.</p>
</div>
<button id="info-button"><span>Läs mer </span></button>
</div>
And it would work
It's actually "getElementsByClassName" you missed the s and it gets a collection so you need to be specific on which one you are targeting. Given your code, you want the first/only element
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName
https://jsfiddle.net/cbye0ph9/
document.getElementsByClassName("info-button")[0].addEventListener("click", function(){
document.getElementsByClassName('info-text')[0].style.display = "block";
});
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 a <div> which contains a <button>. When this button is clicked, I want this <div> to be hidden and another new <div> to be shown in place of the current <div>. Also, the new <div> contains a <button>, which when clicked opens the old <div>. This will enable me to open one <div> at a time on click of the <button> present in those <div>. Can anyone tell me how to do this in AngularJS?
This picture shows my requirement
<body ng-init="showDiv = true">
<div ng-show="showDiv">
<h1>Div 1</h1>
<button ng-click="showDiv = false">Show Div 2</button>
</div>
<div ng-hide="showDiv">
<h1>Div 2</h1>
<button ng-click="showDiv = true">Show Div 1</button>
</div>
</body>
CodePen: https://codepen.io/RaymondAtivie/pen/OXYRyE
Please try something similar to below: use ng-click and ng-show
<div ng-show="!showDiv">
<button ng-click="showDiv=true"></button>
</div>
<div ng-show="showDiv">
<button ng-click="showDiv=false"></button>
</div>
Using ngShow:
<div ng-show="condition" ng-init="condition = true">
<button ng-click="condition = false">Toggle</button>
</div>
<div ng-show="!condition">
<button ng-click="condition = true">Toggle</button>
</div>
But keep in mind to seperate logic like the toggle in ngClick from the view and put it in the controller.
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.