How can I conceal the element that came before in JavaScript?

    <div onclick="toggleContent(this)" class="iptv"><div class="triangle"></div><b>LUZ HD</b> - 98 channels (including 32 HD channels)
            <div class="iptv_price"><b><img src="img/rj45.png" class="icon_oferta"/> 51.00 zł <img src="img/radio.png" class="icon_oferta"/>71.00 zł</b></div></div>
            <div style="display:none;" class="iptv_net">
                <span>IPTV + 60&nbsp;&nbsp; Mbit/s <br/> <b><img src="img/rj45.png" class="icon_oferta"/> 60.00 zł</b></span>
                <span>IPTV + 100 Mbit/s <br/> <b><img src="img/rj45.png" class="icon_oferta"/> 65.00 zł</b></span>
                <span>IPTV + 200 Mbit/s <br/> <b><img src="img/rj45.png" class="icon_oferta"/> 105.00 zł</b></span>
                <iframe src="https://www.avios.pl/pakiety/luzhd_S.html" width="100%;" height="300">Your browser does not support iframes.</iframe>
                <div><a href="/iptv.php?load=luzhd_S">View in full screen</a></div>
            </div>
        
            <div onclick="toggleContent(this)" class="iptv"><div class="triangle"></div><b>KOMFORT HD</b> - 125 channels (including 53 HD channels)
            <div class="iptv_price"><b><img src="img/rj45.png" class="icon_oferta"/> 61.00 zł <img src="img/radio.png" class="icon_oferta"/>81.00 zł</b></div></div>
            <div style="display:none;" class="iptv_net">
                <span>IPTV + 60&nbsp;&nbsp; Mbit/s <br/> <b><img src="img/rj45.png" class="icon_oferta"/> 70.00 zł</b></span>
                <span>IPTV + 100 Mbit/s <br/> <b><img src="img/rj45.png" class="icon_oferta"/> 75.00 zł</b></span>
                <span>IPTV + 200 Mbit/s <br/> <b><img src="img/rj45.png" class="icon_oferta"/> 115.00 zł</b></span>
                <iframe src="https://www.avios.pl/pakiety/komforthd.html" width="100%;" height="300">Your browser does not support iframes.</iframe>
                <div><a href="/iptv.php?load=komforthd">View in full screen</a></div>
            </div>
            
            <div onclick="toggleContent(this)" class="iptv"><div class="triangle"></div><b>KOMFORT+ HD</b> - 152 channels (including 69 HD channels)
            <div class="iptv_price"><b><img src="img/rj45.png" class="icon_oferta"/> 71.00 zł <img src="img/radio.png" class="icon_oferta"/>91.00 zł</b></div></div>

...Continues...

I am looking to create a JavaScript function that toggles the visibility of elements when clicked by the user. The current function works, but I also want it to hide the previous element when a new one is clicked. I would appreciate any tips or guidance on how to achieve this.

function toggleContent(obj)
    {
        var nextObj = obj.nextSibling;
        while(!nextObj.tagName) nextObj = nextObj.nextSibling;
        nextObj.style.display = nextObj.style.display != 'block' ? 'block' : 'none';
        
    }

javascript

Answer №1

Consider Using childNodes

I'm not entirely clear on what you mean by the "previous element."

However, it seems like you're attempting to access the sibling, when in fact you might want to target a child of the main div.

If that's the case... you could utilize obj.childNodes and retrieve an array:

[div.triangle, b, text, div.iptv_price]

You can then implement the following:

obj.childNodes[1].style.display = obj.childNodes[1].style.display === 'inline' ? 'none' : 'inline';

This way, LUZ HD will toggle visibility with the other elements

function showHide(obj)
    {
        var nextObj = obj.nextSibling;
        while(!nextObj.tagName) nextObj = nextObj.nextSibling;
        nextObj.style.display = nextObj.style.display != 'block' ? 'block' : 'none';
      
      obj.childNodes[1].style.display = obj.childNodes[1].style.display === 'inline' ? 'none' : 'inline';        
    }
<div onclick="showHide(this)" class="iptv"><div class="triangle"></div><b>LUZ HD</b> - 98 channels (including 32 HD channels)
            <div class="iptv_price"><b><img src="img/rj45.png" class="icon_oferta"/> 51.00 zł <img src="img/radio.png" class="icon_oferta"/>71.00 zł</b></div></div>
            <div style="display:none;" class="iptv_net">
                <span>IPTV + 60&nbsp;&nbsp; Mbit/s <br/> <b><img src="img/rj45.png" class="icon_oferta"/> 60.00 zł</b></span>
                <span>IPTV + 100 Mbit/s <br/> <b><img src="img/rj45.png" class="icon_oferta"/> 65.00 zł</b></span>
                <span>IPTV + 200 Mbit/s <br/> <b><img src="img/rj45.png" class="icon_oferta"/> 105.00 zł</b></span>
                <iframe src="https://www.avios.pl/pakiety/luzhd_S.html" width="100%;" height="300">Your browser does not support iframes.</iframe>
                <div><a href="/iptv.php?load=luzhd_S">View in full screen</a></div>
            </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for utilizing a button within a hyperlink in a React component:

I am new to react and have been working on the following code: import {NavLink as Link} from 'react-router-dom' return ( <div> {posts.map((actualData, index) => ( <Link to={'/' + actualData.id}> <d ...

javascriptreactjsfrontendreact-router-dom

Guide to setting up ajax to parse the text input and generate a table

Strange dilemma I've been grappling with for the past couple of days. Definitely a novice at this. Here's my code: $(document).ready(function() { var table = $('#table1').DataTable({ "ajax" : { url ...

javascriptjqueryajaxdatatables

An illustration of the fundamental concepts of require.js

main.md <markdown> <head> <script data-main="script" src="http://requirejs.org/docs/release/2.1.8/minified/require.js"></script> </head> <body></body> </markdown> script.css defi ...

javascripthtmlrequirejs

Processing information received through an ajax.post request

I want to establish a connection with a Node.js server on localhost using ajax to send data. For testing purposes, I attempted to send text input to the server and log it there. Here is my Post-Function that triggers upon button click: function sendDat ...

javascriptjquerynode.jsajax

Tips for writing an async function using TypeScript

I've been working with Typescript and NLP.js. However, I'm encountering an issue where the argument manager is displaying 'Parameter manager implicitly has an any type'. I attempted to use :, but it didn't solve the problem eff ...

javascriptnode.jstypescript

What is the best way to create a number input field that also accepts text input?

The goal I have in mind is to create an input field that will contain text like "100%", "54vh", or "32px". I am attempting to utilize the number input's up and down arrows, while still allowing the user to edit the text. However, it should only allow ...

javascriptjqueryhtmlcss

When the submit button is clicked, only the last form within the function will be submitted

I currently have a submit button that is meant for 3 different forms. When submitting, I use the following approach: restaurantCreateForm = function(){ document.getElementById("restaurant-features" ).submit(); document.getElementById("information_ ...

javascriptformssubmit

Interactive button visual effect

I have a piece of code that currently plays audio when I click on an image. However, I am looking to modify it so that not only does clicking on the image play the audio, but it also changes the image to another one. Can anyone assist me with this? Here i ...

javascripthtmlimageaudio-player

Integrating Dynamics CRM with an External Source to Trigger Workflows

Scenario: Imagine a scenario where you want to trigger an existing workflow or a custom action from a webpage located outside the CRM Dynamics environment, such as MS CRM 2011-2013-2015-2016 and 365. Potential Solution: One possible solution could be to ...

javascriptrestcontrollerdynamics-crmworkflow

Get back a variety of substitutions

I have a variety of different text strings that I need to swap out on the client side. For example, let's say I need to replace "Red Apple" with "Orange Orange" and "Sad Cat" with "Happy Dog". I've been working on enhancing this particular ques ...

javascriptjquery

Encountering an issue with postman where properties of undefined cannot be read

I am facing an issue while trying to create a user in my database through the signup process. When I manually enter the data in the create method, it works fine as shown below: Note: The schema components are {userName:String , number:String , email:Stri ...

javascriptnode.jsreactjsmongodbexpress

Mastering Tooltip Placement Using CSS or JavaScript

I have been working on creating a CSS-only tooltip for a web application and so far I have managed to create some useful tooltips with different classes: tooltip-up tooltip-down tooltip-left tooltip-right The distinguishing factors between them are t ...

javascriptcsstooltip

Discover a foolproof method for effortlessly examining an flv or mp4 file embedded within a webpage simply by

I've encountered a challenge with JavaScript. I can successfully check a flash object in a webpage when hovering over it, but I'm unsure how to achieve the same for flv or mp4 objects when either hovering over or moving away from them. Currently ...

javascriptjqueryhtml

Learn the best way to efficiently transfer multiple checkbox selections in a single object using AJAX

In my form, I have 4 checkboxes with unique IDs like filter_AFFILIATION_1, filter_AFFILIATION_2, and so on up to 4. My goal is to dynamically send the values of checked checkboxes to the server using an ajax call. Below is the snippet of my code: $(&a ...

javascriptjqueryajaxcheckbox

Retrieving device information through JavaScript, jQuery, or PHP

Looking to build a website that can identify the device name and model of visitors accessing the page from their devices. ...

javascriptphpjquery

Why does my Observable remain perpetually unfulfilled?

I recently started learning javascript and came across the Angular 2 Documentation where I discovered that Promises can be replaced with Observables. While experimenting with a simple code, I noticed that in addition to the expected result, I am also getti ...

javascriptangularangular2-servicesangular-promiseangular2-observables

Obtain the name of the client's computer within a web-based application

I am working on a Java web application that requires the computer name of clients connecting to it. Initially, I attempted to retrieve this information using JavaScript and store it in a hidden form field. However, I discovered that JavaScript does not hav ...

javascriptjavafirefoxappletclient

Retrieve the content following a successful loading of the remote URL

I have been utilizing this function to retrieve content from a Remote URL function fetchContent($url) { $ch = curl_init($url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); $scrapedPage = curl_exec($ch); curl_close($ch); $content = $scrapedPage; return ...

javascriptphpcurlfile-get-contents

Trouble with Google Interactive Charts failing to load after UpdatePanel refresh

Desperately seeking assistance! I have spent countless hours researching this issue but have hit a dead end. My dilemma involves using the Google Interactive Charts API within an UpdatePanel to dynamically update data based on dropdown selection changes. H ...

javascriptasp.netajaxupdatepanelgoogle-visualization

Exploring the Ins and Outs of Transition Testing in D3 v4

Previously, in older versions of D3, you were able to create unit tests that checked the state of a D3 component after all transitions had finished by flushing the timer with d3.timer.flush(). However, in D3 version 4, this has changed to d3.timerFlush(), ...

javascriptunit-testingd3.jssvgtransition