Conceal (and reveal) hyperlinks as the div's size changes dynamically

Question

Conceal (and reveal) hyperlinks as the div's size changes dynamically

Is there a way to resize a div based on the user's decision to hide or show specific content? For example, take a contents page like this one (https://jsfiddle.net/4b1g5jp9/1/). When a user clicks 'hide', I want the div to adjust its size accordingly by hiding all content except for the actual Contents title.

In addition, I only want the 'Show' link to appear if the content is hidden and vice versa.

I attempted to modify some JavaScript code from a similar issue I found online. Here is what I tried:

<script language="javascript">
            function toggle() {
                var ele = document.getElementById("contents-list");
                if (ele.style.display == "block") {
                    ele.style.display = "none";
                } else {
                    ele.style.display = "block";
                }
            }
        </script>

However, the above solution did not work as expected. Any advice or alternative solutions would be greatly appreciated.

javascript jquery html css

Answer 1

Answer №1

Using the event target allows us to determine what should be shown or hidden, making it possible to use this function multiple times on a single page without interfering with each other.

I've also implemented toggle(), which essentially takes care of the if() condition in your code for you.

Check out the code snippet here

$(document).ready(function() {
$('.toggle').click( function(event) {
  $(event.target).parents('.contents-list').find('ul').toggle();
  var newText = $(event.target).text() === '[Hide]' ? '[Show]' : '[Hide]';
    $(event.target).text(newText);
  });
});

.contents-list{
    width: 300px;
   
    background-color: #f4f6f9;
    padding: 15px;
    border: 1px solid #b3b4b5;
}

.contents-list ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

#contents-list ul li{
    text-decoration: none;
}

.contents-list ul li a{
    padding-bottom: 2px;
    text-decoration: none;
}

.contents-list a:visited { 
    text-decoration: none; color:blue; 
}
.contents-list ul li a:hover{
    text-decoration: underline;
}

.centerContents{
    text-align: center;
}

.toggle{
    font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents-list">
  <div class="centerContents"><b> Contents </b> 
    <a class="toggle" href="#hideContents">[Hide]</a>
  </div>
  <br/>
  <ul>
    <li> <a href="#jumpQ1"> 1.  What is Mobility? </a> </li>
    <li> <a href="#jumpQ2"> 2.  Why Mobility is important </a> </li>
    <li> <a href="#jumpQ3"> 3.  Other </a> </li>
  </ul>
</div>

<div class="contents-list">
  <div class="centerContents"><b> Contents </b> 
    <a class="toggle" href="#hideContents">[Hide]</a>
  </div>
  <br/>
  <ul>
    <li> <a href="#jumpQ1"> 1.  What is Mobility? </a> </li>
    <li> <a href="#jumpQ2"> 2.  Why Mobility is important </a> </li>
    <li> <a href="#jumpQ3"> 3.  Other </a> </li>
  </ul>
</div>

Answer 2

Using the event target allows us to determine what should be shown or hidden, making it possible to use this function multiple times on a single page without interfering with each other.

I've also implemented toggle(), which essentially takes care of the if() condition in your code for you.

Check out the code snippet here

$(document).ready(function() {
$('.toggle').click( function(event) {
  $(event.target).parents('.contents-list').find('ul').toggle();
  var newText = $(event.target).text() === '[Hide]' ? '[Show]' : '[Hide]';
    $(event.target).text(newText);
  });
});

.contents-list{
    width: 300px;
   
    background-color: #f4f6f9;
    padding: 15px;
    border: 1px solid #b3b4b5;
}

.contents-list ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

#contents-list ul li{
    text-decoration: none;
}

.contents-list ul li a{
    padding-bottom: 2px;
    text-decoration: none;
}

.contents-list a:visited { 
    text-decoration: none; color:blue; 
}
.contents-list ul li a:hover{
    text-decoration: underline;
}

.centerContents{
    text-align: center;
}

.toggle{
    font-size: 12px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contents-list">
  <div class="centerContents"><b> Contents </b> 
    <a class="toggle" href="#hideContents">[Hide]</a>
  </div>
  <br/>
  <ul>
    <li> <a href="#jumpQ1"> 1.  What is Mobility? </a> </li>
    <li> <a href="#jumpQ2"> 2.  Why Mobility is important </a> </li>
    <li> <a href="#jumpQ3"> 3.  Other </a> </li>
  </ul>
</div>

<div class="contents-list">
  <div class="centerContents"><b> Contents </b> 
    <a class="toggle" href="#hideContents">[Hide]</a>
  </div>
  <br/>
  <ul>
    <li> <a href="#jumpQ1"> 1.  What is Mobility? </a> </li>
    <li> <a href="#jumpQ2"> 2.  Why Mobility is important </a> </li>
    <li> <a href="#jumpQ3"> 3.  Other </a> </li>
  </ul>
</div>

Answer 3

Answer №2

Implement the given HTML structure:

<div id="list-of-contents">
    <ul>
        <li id="centerContents"><b> Table of Contents </b> 
            <a class="hideLinks" href="#">[Hide]</a>
            <a class="showLinks" href="#">[Show]</a>
        </li>
    </ul>
    <ul class="submenu">
        <li> <a href="#jumpQ1"> 1. What is Communication? </a> </li>
        <li> <a href="#jumpQ2"> 2. Why Communication matters </a> </li>
        <li> <a href="#jumpQ3"> 3. Other Insights </a> </li>
    </ul>
</div>

Utilizing jQuery for functionality:

<script type="text/javascript">
    $("#list-of-contents ul li a.hideLinks").click(function(){
        $("ul.submenu").css("display", "none");
    });

    $("#list-of-contents ul li a.showLinks").click(function(){
        $("ul.submenu").css("display", "block");
    });
</script>

Remember to place your jQuery script immediately after the HTML code, or close to the </body> tag. Additionally, ensure you include the jQuery CDN in the head section:

<script src="jquery-4.0.0.min.js" type="text/javascript"></script>

.

NOTE: Instead of manipulating CSS display properties, you can also make use of the Show() and Hide() functions provided by jQuery. More information on these functions can be found Here.

Answer 4

Implement the given HTML structure:

<div id="list-of-contents">
    <ul>
        <li id="centerContents"><b> Table of Contents </b> 
            <a class="hideLinks" href="#">[Hide]</a>
            <a class="showLinks" href="#">[Show]</a>
        </li>
    </ul>
    <ul class="submenu">
        <li> <a href="#jumpQ1"> 1. What is Communication? </a> </li>
        <li> <a href="#jumpQ2"> 2. Why Communication matters </a> </li>
        <li> <a href="#jumpQ3"> 3. Other Insights </a> </li>
    </ul>
</div>

Utilizing jQuery for functionality:

<script type="text/javascript">
    $("#list-of-contents ul li a.hideLinks").click(function(){
        $("ul.submenu").css("display", "none");
    });

    $("#list-of-contents ul li a.showLinks").click(function(){
        $("ul.submenu").css("display", "block");
    });
</script>

Remember to place your jQuery script immediately after the HTML code, or close to the </body> tag. Additionally, ensure you include the jQuery CDN in the head section:

<script src="jquery-4.0.0.min.js" type="text/javascript"></script>

.

NOTE: Instead of manipulating CSS display properties, you can also make use of the Show() and Hide() functions provided by jQuery. More information on these functions can be found Here.

Conceal (and reveal) hyperlinks as the div's size changes dynamically

Answer №1

Answer №2

Similar questions

Javascript coding for monitoring health status using a three.js health bar

What could be the reason for the Deeplink not functioning properly with my customized Host and schema?

Can we attach multiple event handlers to JqGrid events without replacing existing ones?

jQuery Carousel: Adjusting the Displayed Items

Getting creative with jQuery: Adding a random class using addClass()

In Vue.js, the v-model connects a value that can be easily changed to a different value

How to eliminate spaces while preserving line breaks in a textarea using JS or jQuery

Centering a div vertically within another div

Tips for determining the presence of a query string value using JavaScript

Challenges with Selenium Web Scraping

Trouble with $scope.currentPage not updating correctly in Angular UI Pagination

How can I hide a div using Ajax and show success in the following div?

Fixing CreateJS in Adobe Animate HTML5 Advertisement for Internet Explorer versions 9 and 10

What is the most effective way to view all globally installed npm packages on my device?

The JQuery command to set the display property to "block" is not functioning as expected

Looking for the optimal method to display numerous lines of text in HTML, one by one, at intervals of 60 seconds?

What is the functionality of Nodejs EventEmitter.once() method?

Steps for adding a React Class Component into a Modal that is not within the React Tree

What is the importance of setting up an HTTP server?

Is there a way to activate a function when clicking on the "View larger map" option within the Google Maps