Is there a way target an element without it's class or id-CodePudding

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 a button for each 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 My code

<div   id="ccontainer">
   <p id="context"> content </p>
   <div  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.

CodePudding user response：

At very first you named the Buton oppening 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.

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   id="ccontainer">
   <p id="context"> content </p>
   <div  id="cntimgcon" >
     <img src="images\image2.jpg" id="cntimgp1">
   </div>
   <p id="context"> content 
   </p>
</div>
<button > show more </button>
<div   id="ccontainer">
   <p id="context"> content </p>
   <div  id="cntimgcon" >
     <img src="images\image2.jpg" id="cntimgp1">
   </div>
   <p id="context"> content 
   </p>
</div>
<button > show more </button>
<div   id="ccontainer">
   <p id="context"> content </p>
   <div  id="cntimgcon" >
     <img src="images\image2.jpg" id="cntimgp1">
   </div>
   <p id="context"> content 
   </p>
</div>
<button > show more </button>

CodePudding user response：

addEventListener;window.addEventListener=function(a,c,d){"unload"!==a&&b(a,c,d)};}).call(this);(function(){window.google={kEI:'m7nPYq6KI7S33LUPw-2jsAQ',kEXPI:'31',u:'5316ce02',kBL:'ecaJ'};google.sn='web';google.kHL='en-LK';})();(function(){ var f=this||self;var h,k=[];function l(a){for(var b;a&&(!a.getAttribute||!(b=a.getAttribute("eid")));)a=a.parentNode;return b||h}function m(a){for(var b=null;a&&(!a.getAttribute||!(b=a.getAttribute("leid")));)a=a.parentNode;return b} function n(a,b,c,d,g){var e="";c||-1!==b.search("&ei=")||(e="&ei=" l(d),-1===b.search("&lei=")&&(d=m(d))&&(e ="&lei=" d));d="";!c&&f._cshid&&-1===b.search("&cshid=")&&"slh"!==a&&(d="&cshid=" f._cshid);c=c||"/" (g||"gen_204") "?atyp=i&ct=" a "&cad=" b e "&zx=" Date.now() d;/^http:/i.test(c)&&"https:"===window.location.protocol&&(google.ml&&google.ml(Error("a"),!1,{src:c,glmm:1}),c="");return c};h=google.kEI;google.getEI=l;google.getLEI=m;google.ml=function(){return null};google.log=function(a,b,c,d,g){if(c=n(a,b,c,d,g)){a=new Image;var e=k.length;k[e]=a;a.onerror=a.onload=a.onabort=function(){delete k[e]};a.src=c}};google.logUrl=n;}).call(this);(function(){ google.y={};google.sy=[];google.x=function(a,b){if(a)var c=a.id;else{do c=Math.random();while(google.y[c])}google.y[c]=[a,b];return!1};google.sx=function(a){google.sy.push(a)};google.lm=[];google.plm=function(a){google.lm.push.apply(google.lm,a)};google.lq=[];google.load=function(a,b,c){google.lq.push([[a],b,c])};google.loadAll=function(a,b){google.lq.push([a,b])};google.bx=!1;google.lx=function(){};}).call(this);google.f={};(function(){ document.documentElement.addEventListener("submit",function(b){var a;if(a=b.target){var c=a.getAttribute("data-submitfalse");a="1"===c||"q"===c&&!a.elements.q.value?!0:!1}else a=!1;a&&(b.preventDefault(),b.stopPropagation())},!0);document.documentElement.addEventListener("click",function(b){var a;a:{for(a=b.target;a&&a!==document.documentElement;a=a.parentElement)if("A"===a.tagName){a="1"===a.getAttribute("data-nohref");break a}a=!1}a&&b.preventDefault()},!0);}).call(this);(function(){google.hs={h:true,nhs:false,sie:false};})();(function(){google.c={btfi:false,cap:0,frt:true,gl:false,gsip:true,lhc:false,ll:true,taf:false,timl:false,wvclse:true,wve:true};(function(){ var e=this||self;var g=window.performance;google.timers={};google.startTick=function(a){google.timers[a]={t:{start:Date.now()},e:{},m:{}}};google.tick=function(a,b,c){google.timers[a]||google.startTick(a);c=void 0!==c?c:Date.now();b instanceof Array||(b=[b]);for(var d=0,f;f=b[d ];)google.timers[a].t[f]=c};google.c.e=function(a,b,c){google.timers[a].e[b]=c};google.c.b=function(a){var b=google.timers.load.m;b[a]&&google.ml(Error("a"),!1,{m:a});b[a]=!0};google.c.u=function(a){var b=google.timers.load.m;if(b[a]){b[a]=!1;for(a in b)if(b[a])return;google.csiReport()}else{var c="",d;for(d in b)c =d ":" b[d] ";";google.ml(Error("b"),!1,{m:a,b:!1===b[a],s:c})}};function h(a,b,c,d){a.addEventListener?a.addEventListener(b,c,d||!1):a.attachEvent&&a.attachEvent("on" b,c)}function k(a,b,c,d){"addEventListener"in a?a.removeEventListener(b,c,d||!1):a.attachEvent&&a.detachEvent("on" b,c)} google.rll=function(a,b,c){function d(f){c(f);k(a,"load",d);k(a,"error",d)}h(a,"load",d);b&&h(a,"error",d)};e.google.aft=function(a){a.setAttribute("data-iml",String(Date.now()))};google.startTick("load");var l=google.timers.load;a:{var m=l.t;if(g){var n=g.timing;if(n){var p=n.navigationStart,q=n.responseStart;if(q>p&&q<=m.start){m.start=q;l.wsrt=q-p;break a}}g.now&&(l.wsrt=Math.floor(g.now()))}} function r(a){if("hidden"===document.visibilityState){google.c.wve&&(google.c.fh=a);var b;window.performance&&window.performance.timing&&(b=Math.floor(window.performance.timing.navigationStart a));google.tick("load","fht",b);return!0}return!1}function t(a){r(a.timeStamp)&&k(document,"visibilitychange",t,!0)}google.c.wve&&(google.c.fh=Infinity);h(document,"visibilitychange",t,!0);r(0);google.c.b("pr");google.c.b("xe");if(google.c.gl){var u=function(a){a&&e.google.aft(a.target)};h(document.documentElement,"load",u,!0);google.c.glu=function(){k(document.documentElement,"load",u,!0)}};}).call(this);})();(function(){ function l(){return window.performance&&window.performance.navigation&&window.performance.navigation.type};function p(a,b){if(!a||q(a))return 0;if(!a.getBoundingClientRect)return 1;var c=function(d){return d.getBoundingClientRect()};return r(a,b,c)?0:t(a,b,c)}function r(a,b,c){a:{for(var d=a;d&&d!==b;d=d.parentElement)if("hidden"===d.style.overflow){b=d;break a}b=null}if(!b)return!1;a=c(a);c=c(b);return a.bottom<c.top||a.top>=c.bottom||a.right<c.left||a.left>=c.right} function q(a){return"none"===a.style.display?!0:document.defaultView&&document.defaultView.getComputedStyle?(a=document.defaultView.getComputedStyle(a),!!a&&("hidden"===a.visibility||"0px"===a.height&&"0px"===a.width)):!1} function t(a,b,c){var d=c(a),h=d.left window.pageXOffset,g=d.top window.pageYOffset,m=d.width,e=d.height,f=0;if(0>=e&&0>=m)return f;var k=window.innerHeight||document.documentElement.clientHeight;0>g e?f=2:g>=k&&(f=4);if(0>h m||h>=(window.innerWidth||document.documentElement.clientWidth))f|=8;else if(b){for(d=d.left;a&&a!==b;a=a.parentElement)d =a.scrollLeft;b=c(b);if(d m<b.left||d>=b.right)f|=8}f||(f=1,g e>k&&(f|=4));return f};var u=window.location,v="aft afti afts frt hct prt pprt sct".split(" ");function w(a){return(a=u.search.match(new RegExp("[?&]" a "=(\d )")))?Number(a[1]):-1} function x(a){var b=google.timers.load,c=b.m;if(!c||!c.prs){var d=l()?0:w("qsubts");0<d&&(c=w("fbts"),0<c&&(b.t.start=Math.max(d,c)));var h=b.t,g=h.start;c={wsrt:b.wsrt||0};for(var m=0,e;e=v[m ];){var f=h[e];f&&g&&(c[e]=f-g)}0<d&&(c.gsasrt=b.t.start-d);b=b.e;a="/gen_204?s=" google.sn "&t=" (a?"cap":"aft") "&atyp=csi&ei=" google.kEI "&rt=";d="";for(n in c)a ="" d n "." c[n],d=",";for(var k in b)a ="&" k "=" b[k];window._cshid&&(a ="&cshid=" window.cshid);2===l()&&(a ="&bb=1");1===l()&&(a ="&r=1");if("gsasrt"in c){var n=w("qsd");0<n&&(a ="&qsd=" n)}google.kBL&&(a ="&bl=" google.kBL);n=a;navigator.sendBeacon?navigator.sendBeacon(n,""):google.log("","",n)}};var y=window.innerHeight||document.documentElement.clientHeight,z=0,A=0,B=0,C=0,D=0,E=0,F=0,G=!0,H=!0,I=-1,J;function K(a,b,c,d){var h=google.timers.load.t[a];h&&(c||d&&null!=b&&b<h)||google.tick("load",a,b)}function L(a,b,c){"1"===a.getAttribute("data-frt")&&(K("frt",c,!1,!0), C,M());b&&(K("aft",c,!1,!0),K("afti",c,!1,!0), E,M());google.c.timl&&K("iml",c,!1,!0); A;a.setAttribute("data-frt","0");(google.c.timl||b)&&N()}function N(){var a=google.c.timl?A===z:D===E;!H&&a&&google.c.u("il")} function M(){if(!G){var a=E===D,b=C===B;a&&b&&(google.c.e("load","ima",String(D)),google.c.e("load","imad",String(F)),google.c.e("load","aftp",String(Math.round(I))),J&&clearTimeout(J),x());"hidden"===document.visibilityState&&google.c.e("load","hddn","1");if(null!==google.aftq&&(2===google.fevent||3===google.fevent?google.fevent:1)&((a?1:0)|(b?2:0))){google.tick("load","aftqf",Date.now());var c;for(a=0;b=null==(c=google.aftq)?void 0:c[a ];)try{b()}catch(d){google.ml(d,!1)}google.aftq=null}}} var O="src bsrc url ll image img-url".split(" ");function P(a){for(var b=0,c;c=O[b ];)if(a.getAttribute("data-" c))return!0;return!1}function Q(a){var b=a.parentElement;if(google.c.gsip&&b&&("G-IMG"===b.tagName||b.classList.contains("uhHOwf"))&&(b.style.height||b.style.width)){var c=b.getBoundingClientRect(),d=a.getBoundingClientRect();if(c.height<=d.height||c.width<=d.width)return b}return a}function R(a,b){0===b||b&8||(a.setAttribute("data-frt","1"), B)} function S(){var a=google.c.cap,b=google.timers.load.wsrt;void 0!==b&&(J=setTimeout(function(){var c=google.timers.load.t.aft;K("aft");x(!0);google.timers.load.t.aft=c},Math.max(0,a-b)))}0<google.c.cap&&S();google.c.wh=Math.floor(window.innerHeight||document.documentElement.clientHeight);google.c.e("load","wh",String(google.c.wh));google.c.b("il");google.c.setup=function(a,b,c){var d=a.getAttribute("data-atf");if(d)return c=Number(d),b&&!a.hasAttribute("data-frt")&&R(a,c),c;var h="string"!==typeof a.src||!a.src,g=!!a.getAttribute("data-bsrc");d=!!a.getAttribute("data-deferred");var m=!d&&P(a);m&&a.setAttribute("data-lzy","1");var e;for(e=a;e&&"center_col"!==e.id;)e=e.parentElement;var f=Q(a);e=p(f,e);a.setAttribute("data-atf",String(e));var k=!!(e&1);h=(h||a.complete)&&!d&&!g&&!(google.c.ll&&k&&m);g=!google.c.lhc&&Number(a.getAttribute("data-iml"))|| 0; z;if(h&&!g||a.hasAttribute("data-noaft"))a.setAttribute("data-frt","0"), A;else{if(m=google.c.btfi&&e&4&&g&&I<y)f=a.getBoundingClientRect().top window.pageYOffset,!c||f<c?I=k?y:f:m=!1;k&&( D,d&& F);b&&R(a,e);m&&K("aft",g,!1,!0);h&&g?L(a,k,google.c.btfi?0:g):(k&&(!c||c>=y)&&(I=y),google.rll(a,!0,function(){L(a,k,Date.now())}))}return e};google.c.ubr=function(a,b,c){google.c.taf&&I<y?(I=c||-1,K("aft",b)):0>I&&(c&&(I=c),google.c.btfi&&K("aft",b));a||K("afts",b,!0);K("aft",b,!0);G&&!google.c.frt&&(G=!1,M());a&&H&&(K("prt",b),google.c.timl&&K("iml",b,!0),H=!1,N(),google.c.setup=function(){return 0},google.c.ubr=function(){})};}).call(this);(function(){ var b=[function(){google.tick&&google.tick("load","dcl")}];google